프로그래밍적으로 설명 하자면 @mixin은 각각의 재활용 함수를 만들어 놓는것이고 @include는 만들어 놓은 @mixin을 사용 하는 것이다.
** 하나의 가정 및 약속을 미리 정해 놓는다.
예)
_icon.scss 에 아이콘을 만들어 보려 한다.
1. css폴더와 동일한 레벨에 img폴더가 존재한다
2. img폴더에 icon폴더가 있고 아이콘 이미지는 이 폴더안에 들어간다.
***** ppr(number) : SCSS Basic grammar - functions(px to rem automatic conversion) 참조
_mixin.scss
@mixin iconSettings {
display: inline-block;
vertical-align: middle;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
@mixin iconImgSet($w, $h, $img) {
width: $w;
height: $h;
background-image: url('../img/icon/'+$img);
}
_icon.scss
.icon {
@include iconSettings;
&.icon-search {
@include iconImgSet(ppr(16), ppr(16), 'icon-search.png');
}
}
*** 결과 : xxxx.css
.icon {
display: inline-block;
vertical-align: middle;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.icon.icon-search {
width: 1rem;
height: 1rem;
background-image: url('../img/icon/icon-search.png');
}
'스타일시트 > SCSS' 카테고리의 다른 글
| 7. SCSS 반복문 (2) | 2025.03.24 |
|---|---|
| 6. pixel & rem (0) | 2025.03.20 |
| 4. SCSS 기본 문법 - functions(pixel to rem 자동변환) (0) | 2025.03.20 |
| 3. SCSS 기본 문법 (0) | 2025.03.20 |
| 2. SCSS 사용 방법 - Basic settings (0) | 2025.03.20 |