Mixin (재활용)
Sass Mixin은 스타일 시트 전체에서 재사용할 css 선언 그룹을 정의하는 기능입니다.
우선 Mixin을 사용할 때 두 가지만 기억하면 됩니다.
-
선언하기는
@mixin -
사용하기는
@inclue
즉, 만들어서(선언) 사용(포함)하는 것입니다.
선언하기(@mixin)
기본적인 Mixin 선언은 아주 간단합니다. @mixin 지시어를 사용하여 스타일을 정의합니다. 외부에서 받을 값이 없다면 ( )을 생략할 수 있습니다. 이때 사용할 때도 ( )을 생략합니다.
// SCSS
@mixin 믹스인이름{
스타일;
}
// Sass
=믹스인이름
스타일SCSS와 Sass에서 mixin 사용법에 차이가 존재합니다. SCSS는 중괄호와 세미콜론이 존재하며 @mixin으로 선언합니다. 반면에 Sass에서는 중괄호와 세미콜론이 없고 =로 mixin을 선언합니다. 이때 스타일을 작성할 때 들여쓰기를 주의해야 합니다.
그리고 Mixin은 선택자 포함(중첩)이 가능하고 상위(부모) 요소를 참조하는 &도 사용할 수 있습니다.
// SCSS
@mixin large-text {
font: {
size: 22px;
weight: bold;
family: sans-serif;
}
color: oragane;
&::after {
content: "!!";
}
span .icon {
background-image: url("/images/icon.png");
}
}사용하기 (@inclue)
선언된 Mixin을 사용(포함)하기 위해서는 @include를 사용합니다. 위에서 선언한 Mixin을 사용해보겠습니다.
// SCSS
@inclue 믹스인 이름
// Sass
+믹스인이름// SCSS
h1 {
@include large-text;
}
// CSS
h1 {
font-size: 22px;
font-weigth: bold;
font-family: sans-serif;
color: ornage;
}
h1::after {
content: "!!";
}
h1 span .icon {
background-image: url("/images/icon.png");
}인수(Arguments)
Mixin은 함수(Function)처럼 인수를 가질 수 있습니다. 하나의 Mixin으로 다양한 결과를 만들 수 있습니다.
// SCSS
@mixin 믹스인이름($매개변수) {
스타일;
}
@include 믹스인이름(인수);
// Sass
=믹스인이름($매개변수)
스타일
+믹스인이름(인수)// SCSS
@mixin dashed-line($width, $color) {
border: $width dashed $color;
}
.box1 {
@include dashed-line(1px, red);
}
.box2 {
@include dashed-line(4px, blue);
}
// CSS
.box1 {
border: 1px dashed red;
}
.box2 {
border: 4px dashed blue;
}인수의 기본값 설정
인수는 기본값(default value)를 가질 수 있습니다. @include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 적용됩니다.
// SCSS
@mixin 믹스인이름($매개변수: 기본값) {
스타일;
}
@include 믹스인이름;// SCSS
@mixin dashed-line($width: 1px, $color: black) {
border: $width dashed $color;
}
.box1 {
@include dashed-line;
}
.box2 {
@include dashed-line(4px);
}
// CSS
.box1 {
border: 1px dashed black;
}
.box2 {
border: 4px dashed black;
}키워드 인수(Keyword Arguments)
@mixin 믹스인이름($매개변수A: A, $매개변수B: B) {
스타일;
}
// 매개변수 A는 기본값을 사용하고, 매개변수B는 전달한 인수 C를 사용합니다.
@include($매개변수B: C);Mixin에 전달한 인수는 기본적으로 순서대로 전달됩니다. 이때 명시적으로 키워드(변수)를 입력하여 작성할 수 있습니다. 별도의 인수 입력 순서를 필요로 하지 않아 편리하게 작성할 수 있습니다.
단, 작성하지 않은 인수가 적용될 수 있도록 기본값을 설정해주어야 합니다.
키워드 인수를 통해 중간 부분의 특정 매개변수에 인수를 전달할 수 있습니다.
가변 인수(Variable Arguments)
때때로 입력할 인수의 개수가 불확실한 경우 가변 인수를 사용할 수 있습니다. 가변 인수는 매개변수 뒤에 ...을 붙여줍니다. 자바스크립트에서 Rest 매개변수와 유사하게 동작합니다.
@mixin 믹스인이름($매개변수...) {
스타일;
}
@include 믹스인이름(인수A, 인수B, 인수C);// SCSS
@mixin bg($width, $heigth, $bg-value...) {
width: $width;
height: $height;
background: $bg-value;
}
div {
@include bg(
100px,
200px,
url("/images/a.png") no-repeat 10px 20px,
url("/images/b.png") no-repeat
);
}
// CSS
div {
width: 100px;
height: 200px;
background:
url("/images/a.png") no-repeat 10px 20px,
url("/images/b.png") no-repeat;
}위 코드에서 인수를 순서대로 하나씩 전달 받다가, 세 번째 매개변수($bg-value)에서 전달되는 인수의 개수와 상관없이 모두 전달받습니다.
인수를 전달받은 매개변수 뒤에 ...을 사용하여 가변 인수를 활용했습니다.
이번에는 반대로 가변 인수를 전달할 값으로 사용해보겠습니다. 자바스크립트의 스프레드 연산자와 유사하게 동작합니다.
// SCSS
@mixin font($style: normal, $weight: normal, $size: 16px, $family: sans-serif) {
font: {
style: $style;
weight: $weight;
size: $size;
family: $family;
};
}
div {
// font-values 변수에 들어가는 값은 리스트 타입의 값입니다.
$font-values: italic, bold, 16px, sans-serif;
// 변수 뒤에 ...을 사용하여 값을 전개하여 값의 목록으로 전달합니다.
@include font($font-values...);
}
// CSS
div {
font-style: itlaic;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
}@content
선언된 Mixin에 @content가 포함되어 있다면 해당 부분에 원하는 스타일을 추가적으로 전달할 수 있습니다. 이 방식을 사용하면 Mixin이 갖고 있는 기능에 선택자나 속성 등을 추가할 수 있습니다.
// SCSS
@mixin 믹스인이름() {
스타일;
@content;
}
@include 믹스인이름() {
스타일;
};// SCSS
@mixin icon($url) {
&::after {
content: $url;
};
}
.icon1 {
@include icon("/images/icon1.png");
}
.icon2 {
@include icon("/images/icon2.png") {
position: absolute;
width: 100px;
height: 100px;
};
}
// CSS
.icon1::after {
content: "/images/icon1.png";
}
.icon2::after {
content: "/images/icon2.png";
position: absolute;
width: 100px;
height: 100px;
}.icon1에서는 기존 icon Mixin에 정의한 스타일만 적용이 되고, .icon2에서는 icon Mixin에 정의한 스타일과 뒤에 작성한 스타일 블록이 추가되어 적용이 됩니다.
즉, Mixin에 @include가 포함되어 있다면 사용하는 부분(@include) 뒤에 @content에 추가될 스타일 블록을 작성할 수 있습니다.
이때 Mixin에게 전달되는 스타일 블록은 Mixin 범위가 아니라 스타일 블록이 정의된 범위에서 평가됩니다. 즉, 전달되는 스타일 블록이 위치한 곳에서 평가된 이후에 Mixin에게 전달되는 것입니다.
아래 코드처럼 전달되는 스타일 블록은 Mixin 안에 선언된 변수를 참조할 수 없습니다. 전달되는 스타일 블록은 color: red;로 평가가된 이후에 Mixin에게 전달됩니다.
// SCSS
$color: red;
@mixin colors($color: blue) {
@content;
background-color: $color;
border-color: $color;
}
div {
@include colors() {
// 전달되는 스타일 블록 내 $color는 Mixin의 매개변수인 $color가 아닌 전역 변수 $color 값을 참조합니다.
color: $color;
};
}
// CSS
div {
background-color: blue;
border-color: blue;
color: red;
}