Sass(SCSS) At-Rules #2[@mixin & @includes]

Mixin

Mixins을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일을 정의할 수 있습니다.

• mixins 문법

  // mixin 정의
  @mixin <name>(<arguments>){...}
  
  // include
  @include <name>
  @include <name>(<arguments...>)

• Scss

  @mixin reset-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  @mixin horizontal-list {
    @include reset-list;
  
    li {
      display: inline-block;
      margin: {
        left: -2px;
        right: 2em;
      }
    }
  }
  
  nav ul {
    @include horizontal-list;
  }

• CSS

  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav ul li {
    display: inline-block;
    margin-left: -2px;
    margin-right: 2em;
  }

Mixin Sass 식별자와 마찬가지로 하이픈과 밑줄을 동일하게 취급합니다. reset-list or reset_list 둘 다 같은 mixin을 의미합니다.

---

매개변수(Arguments)

Mixins은 매개변수를 가질 수 있습니다. 매개변수를 사용하면 mixins을 호출할 때마다 동작을 지정할 수 있습니다. Arguments는 괄호로 둘러쌓인 변수 이름의 목록으로 mixin name 뒤에 지정됩니다.

• Scss

  @mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;
  
    [dir=rtl] & {
      #{$property}: $rtl-value;
    }
  }
  
  .sidebar {
    @include rtl(float, left, right);
  }

• CSS

  .sidebar {
    float: left;
  }
  [dir=rtl] .sidebar {
    float: right;
  }

선택적 매개변수(Optional Arguments)

mixin의 매개변수에 선택적으로 기본값을 설정할 수 있습니다. 기본값은 변수 선언과 동일한 구문을 사용합니다. 변수 이름 뒤에 콜론과 SassScript 표현식이 옵니다.

• Scss

  @mixin replace-text($image, $x: 50%, $y: 50%) {
    text-indent: -99999em;
    overflow: hidden;
    text-align: left;
  
    background: {
      image: $image;
      repeat: no-repeat;
      position: $x $y;
    }
  }
  
  .mail-icon {
    @include replace-text(url("/images/mail.svg"), 0);
  }

• CSS

  .mail-icon {
    text-indent: -99999em;
    overflow: hidden;
    text-align: left;
    background-image: url("/images/mail.svg");
    background-repeat: no-repeat;
    background-position: 0 50%;
  }

키워드 매개변수(Keyword Arguments)

mixin이 포함되어 있을 때, 매개변수는 매개변수 목록에서 그들의 위치로 전달되는 것 외에도 이름으로 전달될 수 있습니다. 여러개의 선택적 매개변수가 있는 mixin 또는 그 의미가 불분명한 Boolean 매개변수와 함께 사용할 때 특히 유용합니다.

• Scss

  @mixin square($size, $radius: 0) {
  width: $size;
  height: $size;
  
  @if $radius != 0 {
    border-radius: $radius;
    }
  }
  
  .avatar {
    @include square(100px, $radius: 4px);
  }

• CSS

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 4px;
  }

임의의 매개변수(Taking Arbitrary Arguments)

mixin 선언 시 마지막 매개변수가 ...로 끝난다면, 해당 mixin에 대한 모든 추가 매개변수가 해당 매개변수에 목록으로 전달됩니다.

• Scss

  @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");

• CSS

  input.name {
    position: absolute;
    height: 150px;
    margin-top: 0px;
  }
  
  input.address {
    position: absolute;
    height: 150px;
    margin-top: 150px;
  }
  
  input.zip {
    position: absolute;
    height: 150px;
    margin-top: 300px;
  }

임의의 키워드 매개변수 사용(Taking Arbitrary Keyword Arguments)

매개변수 목록 또한 임의의 키워드 매개변수를 취할 수 있습니다. Keyword() 함수는 매개변수 목록을 가져와 매개변수 이름($ 포함하지 않음)에서 해당 매개변수 값으로 매핑합니다.

• Scss

  @mixin syntax-colors($args...) {
    @debug keywords($args); // (string: #080, comment: #800, $variable: $60b)
  
    @each $name, $color in keywords($args) {
      pre span.stx-#{$name} {
        color: $color;
      }
    }
  }
  
  @include syntax-colors(
    $string: #080,
    $comment: #800,
    $variable: #60b,
  )

• CSS

  pre span.stx-string {
    color: #080;
  }
  
  pre span.stx-comment {
    color: #800;
  }
  
  pre span.stx-variable {
    color: #60b;
  }

---

콘텐츠 블록(Content Blocks)

믹스인은 콘텐츠 블록이라고 하는 전체 스타일 블록을 사용할 수 있습니다. 믹스인 본문에 @content를 포함시켜 컨텐츠 블록을 사용한다고 선언할 수 있습니다.

• Scss

  @mixin hover {
    &:not([disabled]):hover {
      @content;
    }
  }
  
  .button {
    border: 1px solid black;
    @include hover {
      border-width: 2px;
    }
  }

• CSS

  .button {
    border: 1px solid black;
  }
  .button:not([disabled]):hover {
    border-width: 2px;
  }

매개변수를 컨텐츠 블록에 전달(Passing Arguments to Content Blocks)

• Scss

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

• CSS

  @media screen {
    h1 {
      font-size: 40px;
    }
  }
  @media print {
    h1 {
      font-size: 40px;
      font-family: Calluna;
    }
  }

---

들여쓰기를 활용한 mixin 신 구문(Indented Mixin Syntax)

이 구분은 간결하지만 이해하기 쉽지 않다는 단점이 있습니다.

• Scss

  =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

• CSS

  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav ul li {
    display: inline-block;
    margin-left: -2px;
    margin-right: 2em;
  }