SASS / Mixin 정의하고 사용하기
Mixin 정의하기
Mixin은 다음과 같은 형식으로 정의합니다.
@mixin mixin-name { // code }
인자를 포함하여 다음과 같이 정의할 수도 있습니다.
@mixin mixin-name( $arg1, $arg2, ... ) { // code }
Mixin 사용하기
Mixin을 사용할 때는 다음과 같이 합니다.
@include mixin-name;
인자가 있는 mixin이라면 다음과 같이 합니다.
@include mixin-name( value1, value2, ... );
예제 1
가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다.
SCSS
@mixin jb { p { color: red; } } @include jb;
CSS
p { color: red; }
예제 2
@include는 선택자 안에서 사용할 수도 있습니다.
SCSS
@mixin jb { color: red; } p { @include jb; }
CSS
p { color: red; }
예제 3
인자를 사용한 간단한 예제입니다.
SCSS
@mixin jb( $margin, $color ) { margin: $margin; color: $color; } p { @include jb( 20px 0px, red ); }
CSS
p { margin: 20px 0px; color: red; }
예제 4
인자를 사용하고, 특정 인자에는 기본값을 설정한 예제입니다. 인자에 대한 값을 정해주지 않으면 기본값을 사용합니다.
SCSS
@mixin jb( $margin, $color: blue ) { margin: $margin; color: $color; } p { @include jb( 20px 0px ); }
CSS
p { margin: 20px 0px; color: blue; }