[Sass 문법 정리] 5. @mixin, @extend

4.7. 재활용(Mixins)

mixins는 스타일시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능입니다. @mixin은 재사용할 내용을 선언하는 부분이며 @include는 @mixin에서 정의된 내용을 삽입,적용되는 부분입니다.

4.7.1. @mixin

@mixin 사용법// SCSS문법과 Sass문법이 다릅니다.

// SCSS문법
@mixin 믹스인이름 {
  스타일;
}

// Sass문법
=믹스인이름
  스타일

 

@mixin예제

// 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

 

@mixin은 변수사용도 가능합니다.

@mixin size($w, $h){
    width: $w;
    height: $h;
}
@mixin size($w:100px, $h: 100px) { //디폴트값을 설정하여 값이 없는경우 적용된다.
    width: $w;
    height: $h;
}

 

@mixin의 가변인수인 경우 …을 붙여 사용합니다.

@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)...);
}

 

4.7.2. @include

@mixin에서 선언된 내용이 적용되는 부분입니다.

@include사용법

// SCSS문법
@include 믹스인이름;

// Sass문법
+믹스인이름

 

@include예제

// SCSS문법
h1 {
  @include large-text;
}
div {
  @include large-text;
}
// Sass문법
h1
  +large-text
div
  +large-text

 

4.7.3. @content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있습니다. 이 방식을 사용하여 기존의 mixin이 가지고있는 기능에 선택자나 속성 등을 추가할 수 있습니다.

SCSS예제

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

CSS컴파일후

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

 

4.8. @extend – 확장

특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우가 있습니다. 이경우 @extend를 활용하여 객체지향의 상속처럼 활용할 수 있습니다.

@extend 활용법

@extend 선택자;

 

SCSS예제

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

 

CSS컴파일후

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}