[Sass/SCSS] 6. Sass/SCSS Mixins 사용법

Mixins는 style sheet 전반에서 재사용을 할 CSS 그룹을 정의하는 기능입니다.

 

(1) @Mixin

//SCSS
@mixin 이름 {
	스타일 정의
}

//Sass
=이름
	스타일 정의

//SCSS
@mixin l-red-text {
	font-size: 30px;
    font-weight: bold;
    color: red;
}

//Sass
=l-red-text
	font-size: 30px
    font-weight: bold
    color: red

① 선택자 포함 가능

② 상위(부모) 요소 참조 가능 ex)&

@mixin l-red-text {
  font: {
    size: 30px;
    weight: bold;
  }
  color: red;

  &::after {
    content: "content";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

 

(2) @include

Mixin은 선언으로 끝나는 게 아니라 @include로 사용해야 합니다.

//SCSS
@include 이름;

//Sass
+이름

if (Sass or SCSS) {

//SCSS
p {
	@include l-red-text;
}
div {
	@include l-red-text;
}

//Sass
p
	+l-red-text;
div
	+l-red-text;

} else if (Compiled CSS) {

p {
	font-size: 30px;
    font-weight: bold;
    color: red;
}
p::after {
	content: "content";
}
p span.icon {
	background: url("/images/icon.png");
}

div {
	font-size: 30px;
    font-weight: bold;
    color: red;
}
div::after {
	content: "content";
}
div span.icon {
	background: url("/images/icon.png");
}

}

 

(3) 인수 (Arguments)

Mixin은 function처럼 변수와 인수를 가질 수 있다.

// SCSS
@mixin 이름($매개변수) {
  스타일 정의;
}
@include 이름(인수);

// Sass
=이름($매개변수)
  스타일 정의

+이름(인수)

if (SCSS) {

@mixin solid-line($width, $color) {
  border: $width solid $color;
}

.box1 { @include solid-line(1px, red); }
.box2 { @include solid-line(2px, blue); }

} else if (SCSS to CSS) {

.box1 {
	border: 1px solid red;
}
.box2 {
	border: 2px solid blue;
}

}

 

① 인수의 default value 설정

@include 단계에서 별도 값이 전달되지 않으면 기본 값이 사용됨.

@mixin 이름($매개변수: 기본값) {
  스타일 정의;
}

if (SCSS) {

@mixin solid-line($width: 1px, $color: red) {
  border: $width solid $color;
}

.box1 { @include solid-line; }
.box2 { @include solid-line(2px); }

} else if (SCSS to CSS) {

.box1 {
  border: 1px solid red;
}
.box2 {
  border: 2px solid red;
}

}

 

② 키워드 인수(Keyword Arguments)

@mixin 이름($매개변수A: default value, $매개변수B: default value) {
  스타일 정의;
}

@include 이름($매개변수B: 인수);

if (SCSS) {

@mixin position(
	$p: absolute,
	$t: null,
	$b: null,
	$l: null,
	$r: null
) {
	position: $p;
	top: $t;
	bottom: $b;
	left: $l;
	right: $r;
}

.absolute {
	// 키워드 인수로 설정할 값만 전달 가능
	@include position($t: 10px, $l: 10px);
}
.relative {
	@include position(
		relative,
		$t: 10px
	);
}

 

} else if (SCSS to CSS) {

.absolute {
	position: absolute;
    top: 10px;
    left: 10px;
}
.relative {
	position:l relative;
    top: 10px;
}

}

 

③ 가변 인수 (Variable Arguments)

인수의 개수가 불확실할 경우, ...를 사용하여 가변 인수를 사용.

@mixin 이름($매개변수...) {
	스타일 정의;
}

@include 이름(인수A, 인수B, 인수C);

if (SCSS) {

@mixin bg($w, $h, $bgs...) {
	width: $w;
	height: $h;
	background: $bgs;
}

div {
	@include bg(
		100px,
		50px,
		url("/images/1.png") no-repeat 5px 10px,
		url("/images/2.png") no-repeat,
		url("/images/3.png")
	);
}

} else if (SCSS to CSS) {

div {
	width: 100px;
	height: 50px;
	background: url("/images/1.png") no-repeat 5px 10px,
                url("/images/2.png") no-repeat,
                url("/images/3.png");
}

}

 

④ 가변 인수의 전달

위의 가변 인수는 반대로 전달도 가능합니다.

if (SCSS) {

@mixin font(
  $style: normal,
  $weight: 300,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  // 순서와 개수에 맞게 전달하면 그대로 전송됨.
  $font-styles: underline, 500, 20px, sans-serif;
  @include font($font-styles...);
}
span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-styles: (style: initial, size: 18px);
  @include font($font-styles...);
}
a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 700, size: 18px)...);
}

} else if (SCSS to CSS) {

div {
  font-style: underline;
  font-weight: 500;
  font-size: 20px;
  font-family: sans-serif;
}
span {
  font-style: initial;
  font-weight: 300;
  font-size: 18px;
  font-family: sans-serif;
}
a {
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  font-family: sans-serif;
}

}

 

⑤ @content

mixin에 @content가 포함되어 있을 경우 스타일 블록을 전달하여 선택자나 속성을 추가할 수 있다.

@mixin 이름() {
	스타일 정의;
	@content;
}

@include 이름() {
	// 스타일 블록
	스타일 정의;
}

if (SCSS) {

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  @include icon("/images/icon.png");
}
.icon2 {
  @include icon("/images/icon.png") {
    position: absolute; //icon이라는 이름의 mixin에 style block 추가시
  };
}

} else if (SCSS to CSS) {

.icon1::after {
  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

}

 

Style block은 mixin이 아닌 자신이 정의된 범위를 기준으로 적용되므로 참고할 것.

지역 변수와 전역 변수를 생각하면 쉬움.

 

if (SCSS) {

$color: red;

@mixin colors($color: blue) {
	@content;
	background-color: $color; //blue
	border-color: $color; //blue
}

div {
  @include colors() {
    color: $color; //red
  }
}

} else if (SCSS to CSS) {

div {
  color: red;
  background-color: blue;
  border-color: blue;
}

}