1. sass basic - partial
코드들을 종류별로 분리해서 관리하는 기법이다. (예 : 아래와 같은 코드들)
// mixin
@mixin fontSizeBgColor($fontSize: 20px, $bgColor: #fff) {
font-size: $fontSize;
background-color: $bgColor;
}
@mixin linkStyle($textColor: #222, $textDeco: none) {
color: $textColor;
text-decoration: $textDeco;
}
_mixins.scss (파일이름)
scss 파일 앞에 _ (언더스코어)를 붙이면 컴파일되지 않는다.
그 이유는 위와 같이 mixin 함수들 처럼 굳이 컴파일이 될 필요가 없는 코드들을 언더스코어가 붙은 파일로 partial하기 위함이다.
// _mixins.scss
@mixin fontSizeBgColor($fontSize: 20px, $bgColor: #fff) {
font-size: $fontSize;
background-color: $bgColor;
}
@mixin linkStyle($textColor: #222, $textDeco: none) {
color: $textColor;
text-decoration: $textDeco;
}
언더스코어가 붙어도 아래처럼 언더스코어는 제외하고 파일이름을 명시한다.
아래와 같이 import하면 style.scss 파일에서 _mixins.scss에 있는 mixin 함수들을 사용할 수 있게된다.
// style.scss
@import "mixins";
#box1 {
@include linkStyle(#fff, none);
}
_extends.scss
// _extends.scss
%boxShape {
border-radius: 20px;
border: 3px solid #f00;
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, .75);
}
// style.scss
@import "extends";
#box1 {
@extend %boxShape;
}