SCSS Mixins

HTML & CSS / Sass & SCSS

스타일 시트 전체에서 재사용할 CSS 선언 그룹을 정의 해준다. 약간의 Mixin으로 다양한 스타일을 만들 수 있다.

  • 선언하기: @mixin (만들어서)
  • 포함하기: @include (사용하기)

mixin

Mixin은 선택자를 포함가능하고 상위 요소 참조(& 등)도 가능하다.

1
2
3
4
5
6
7
8
// SCSS
@mixin 믹스인이름 {
  스타일;
}

// Sass
=믹스인이름
  스타일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// SCSS
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

// Sass
=large-text
  font-size: 22px
  font-weight: bold
  font-family: sans-serif
  color: orange

@include

선언된 Mixin을 사용하기 위해서는 @include가 필요하다.

1
2
3
4
5
// SCSS
@include 믹스인이름;

// Sass
+믹스인이름

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
// SCSS
h1 {
  @include large-text;
}
div {
  @include large-text;
}

// Sass
h1
  +large-text
div
  +large-text

Compiled to CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

div {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

인수 (Arguments)

Minxin은 함수처럼 인수(Arguments)를 가질 수 있으며, 하나의 Mixin으로 다양한 결과를 만들 수 있다.

1
2
3
4
5
6
7
8
9
10
// SCSS
@mixin 믹스인이름($매개변수) {
  스타일;
}
@include 믹스인이름(인수);

// Sass
=믹스인이름($매개변수)
  스타일
+믹스인이름(인수)

SCSS

1
2
3
4
5
6
@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, black); }
.box2 { @include dash-line(2px, orange); }

Compiled to CSS

1
2
3
4
5
6
.box1 {
  border: 1px dashed black;
}
.box2 {
  border: 2px dashed orange;
}

인수의 기본값 설정

인수는 기본값을 가질 수 있다.@include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용된다.

1
2
3
@mixin 믹스인이름($매개변수: 기본값) {
  스타일;
}

SCSS

1
2
3
4
5
6
@mixin dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}

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

Compiled to CSS

1
2
3
4
5
6
.box1 {
  border: 1px dashed black;
}
.box2 {
  border: 2px dashed black;
}

키워드 인수

Mixin에 전달할 인수를 입력할 때 명시적으로 키워드(변수)를 입력하여 작성 할 수 있다. 별도의 입력 순서를 필요로 하지 않기 때문에 편리하지만 작성하지 않은 인수가 적용될 수 있도록 기본값을 설정해주는 것이 좋다.

1
2
3
4
@mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) {
  스타일;
}
@include 믹스인이름($매개변수B: 인수);

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@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($b: 10px, $r: 20px);
}
.fixed {
  // 인수가 많아짐에 따라 가독성을 확보하기 위해 줄바꿈
  @include position(
    fixed,
    $t: 30px,
    $r: 40px
  );
}

Compiled to CSS

1
2
3
4
5
6
7
8
9
10
.absolute {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.fixed {
  position: fixed;
  top: 30px;
  right: 40px;
}

가변 인수(Variable Arguments)

입력할 인수의 개수가 불확실 할 때 가변인수 를 사용한다. 가변인수는 매개변수 뒤에 ...을 붙여준다.

1
2
3
4
5
@mixin 믹스인이름($매개변수...) {
  스타일;
}

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

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 인수를 순서대로 하나씩 전달 받다가,
// 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $bg-values;
}

div {
  // 위의 Mixin(bg) 설정에 맞게 인수를 순서대로 전달하다가
  //3번째 이후부터는 개수에 상관없이 전달
  @include bg(
    100px,
    200px,
    url("/images/a.png") no-repeat 10px 20px,
    url("/images/b.png") no-repeat,
    url("/images/c.png")
  );
}

Compiled to CSS

1
2
3
4
5
6
7
div {
  width: 100px;
  height: 200px;
  background: url("/images/a.png") no-repeat 10px 20px,
              url("/images/b.png") no-repeat,
              url("/images/c.png");
}

가변 인수를 전달할 값으로 사용한 경우

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  // 매개변수 순서와 개수에 맞게 전달
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}
span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}
a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 900, family: monospace)...);
}

Compiled to CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
}
span {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  font-family: sans-serif;
}
a {
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  font-family: monospace;
}

content

선언된 Mixin에 @content가 포함되어 있으면 해당 부분에 원하는 스타일 블록을 전달할 수 있다. 이 방식으로 Mixin이 가지고 있는 기능에 선택자나 속성을 추가 할 수 있다. Mixin에게 전달된 스타일 블록은 Mixin의 범위가 아니라 스타일 블록이 정의된 범위에서 평가된다. Mixin의 매개변수는 전달된 스타일 블록 안에서 사용되지 않고, 전역 값으로 해석 된다.

1
2
3
4
5
6
7
8
9
@mixin 믹스인이름() {
  스타일;
  @content;
}

@include 믹스인이름() {
  // 스타일 블록
  스타일;
}

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$color: red;

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

div {
  @include colors() {
    // 스타일 블록이 정의된 범위
    color: $color;
  }
}

Compiled to CSS

1
2
3
4
5
div {
  color: red;
  background-color: blue;
  border-color: blue;
}

확장 (Extend)

특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우 에 확장 기능을 사용할 수 있지만 다음과 같은 문제를 고려해야 한다.

  • 내 현재 선택자가 어디에 첨부될 것인가?
  • 원하지 않는 부작용이 초래될 수 있는가?
  • 한 번의 확장으로 얼마나 큰 CSS가 생성되는가?

이러한 이유로 확장은 권하지 않으며 Mixin을 대체 기능으로 사용 하는 것이 좋다.

1
@extend 선택자;

SCSS

1
2
3
4
5
6
7
8
9
.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

Compiled to CSS

1
2
3
4
5
6
7
8
.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}

REFERENCE
https://heropy.blog/2018/01/31/sass/

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer