[CSS][Sass] Syntax | 01. Mixin & Include

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

 

Mixin은 스타일 시트에서 사용자가 정의한 스타일을 재사용할 수 있게 해주는 구문입니다.

 

기본적으로 mixin으로 정의하고, include로 불러옵니다.

 

Mixin을 이용한 스타일은 아래와 같이 정의할 수 있습니다.

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

정의한 스타일은 아래와 같이 불러와 사용합니다.

header {
  @include center;
}

실제로 빌드할 때는 다음과 같은 CSS 파일로 변환되어 나오게 됩니다.

header {
  display: flex;
  justify-content: center;
  align-items: center;
}

인자 받기 (Argument)

Mixins는 인자를 받을 수도 있습니다.

 

인자를 받을 때는 스타일 이름과 함께 소괄호()로 인자를 표시합니다.

 

이 때 인자 앞에는 $를 붙여줍니다.

@mixin replace-text($image, $x, $y) {
  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 50%, 50%);
}

기본값(optional argument)

// 기본값(50%) 설정
@mixin replace-text($image, $x: 50%, $y: 50%) {
  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

키워드 전달(keyword argument)

// 키워드(x = 0) 선언
.mail-icon {
  @include replace-text(url("/images/mail.svg"), $x: 0);
}

가변인자(Arbitrary argument)

// 가변인자 selectors = [input.name, input.address, input.zip]
@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

가변인자 키워드 전달(Arbitrary Keyword Argument)

@use "sass:meta";

// 가변인자 args = [string, comment, variable]
// 가변인자 키워드 meta.keywords(args) = (string: #080, comment: #800, variable: #60b)
@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

컨텐츠 블록 (Content Block)

Mixin은 인자뿐만 아니라 스타일 코드 일부를 전달 받을 수도 있습니다. 이를 컨텐츠 블록(content block)이라고 합니다.

 

@mixin에서 스타일을 정의할 때 컨텐츠 블록을 받을 자리를 @content 구문으로 표시하고,

 

@include에서 스타일을 호출할 때는 중괄호{}로 감싸 전달합니다.

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}

컨텐츠 블록에서도 똑같이 인자를 전달할 수 있습니다.

 

이 경우 @content 다음에 소괄호()로 인자를 표시하고, @include에서 컨텐츠 블록에 전달할 인자를 using 구문을 사용해 전달합니다.

@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}

들여쓰기 표기법 (Indented Mixin Syntax)

Sass에는 mixin과 include를 좀 더 간단하게 표기하는 방법이 있습니다.

 

@mixin은 '='로, @include는 '+'로 나타낼 수 있습니다.

 

간단하지만, 처음 볼 때는 알아보기 어렵기 때문에 공식문서에서 추천하는 방법은 아닙니다.

// Sass
=reset-list
  margin: 0
  padding: 0
  list-style: none

=horizontal-list
  +reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em

nav ul
  +horizontal-list