[Sass/SCSS] 재활용(Mixins) - @include

Sass(SCSS) 재활용(Mixins) - @include

• Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 아주 훌륭한 기능입니다.
• 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다.
• 선언하기(@mixin)와 포함하기(@include)

@mixin

• 기본적인 Mixin 선언은 아주 간단합니다.

• @mixin 지시어를 이용하여 스타일을 정의합니다.

• SCSS:

@mixin 믹스인이름 {
  스타일;
}

@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

• Mixin은 선택자를 포함 가능하고 상위(부모) 요소 참조(＆같은)도 할 수 있습니다.

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  ＆::after {
    content: "!!";
  }

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

@include

• 선언된 Mixin을 사용(포함)하기 위해서는 @include가 필요합니다.

• SCSS:

@include 믹스인이름;

h1 {
  @include large-text;
}
div {
  @include large-text;
}

• Sass:

+믹스인이름

h1
  +large-text
div
  +large-text

• Compiled to:

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

h1::after {
  content: "!!";
}

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

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

div::after {
  content: "!!";
}

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