반응형
@mixin 예제(1)
@mixin ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
p {
width: 300px;
@include ellipsis;
}
@mixin 예제(2)
@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent) {
background-image: url($bg-url);
background-repeat: no-repeat;
background-position: $bg-position;
background-size: $bg-size;
background-color: $bg-color;
}
.bg {
margin: 0 auto;
width: 100px;
height: 100px;
@includie bg-img('https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg', center, contain, white);
}
반응형
'cs > html-css-basic' 카테고리의 다른 글
[HTML/CSS] 3-6. Sass @function & 3-7. 마무리 (0) | 2022.03.12 |
---|---|
[HTML/CSS] 3-4. Sass Variables (0) | 2022.03.12 |
[HTML/CSS] 3-3. Sass @import (0) | 2022.03.12 |
[HTML/CSS] 3-2. Sass 7-1 패턴 (0) | 2022.03.12 |
[HTML/CSS] 3-1. Sass란? (0) | 2022.03.12 |