[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");
}



    본 포스팅은 HEROPY 님의 영상과 블로그를 보고 공부한 내용을 정리한 것입니다.
    https://heropy.blog/2018/01/31/sass/