Sass(SCSS) Interpolation

보간법(Interpolation)

Sass 스타일시트의 거의 모든 위치에서 보간법을 사용할 수 있습니다. ${}

  * 스타일 규칙의 선택자 (Selectors in style rules)
  * 속성 이름 (Property names in declarations)
  * 사용자 지정 속성 값 (Custom property values)
  * CSS at-rules
  * @extend
  * 일반 CSS @import
  * 인용된 문자열 및 인용되지 않은 문자열 (Quoted or unquoted strings)
  * 함수 (Special functions)
  * 일반 CSS 함수 이름 (Plain CSS function names)
  * 주석 (Loud comments)

• SCSS

  @mixin corner-icon($name, $top-or-bottom, $left-or-right) {
    .icon-#{$name} {
      background-image: url("/icons/#{$name}.svg");
      position: absolute;
      #{$top-or-bottom}: 0;
      #{$left-or-right}: 0;
    }
  }
  
  @include corner-icon("mail", top, left);

• CSS

  .icon-mail {
    background-image: url("/icons/mail.svg");
    position: absolute;
    top: 0;
    left: 0;
  }

---

In SassScript

보간법을 사용하여 인용되지 않은 문자열에 SassScript를 사용할 수 있습니다. 이것은 동적으로 이름을 생성하거나 슬래시로 구분된 값을 사용할 때 특히 유용합니다. SassScript의 보간법은 항상 인용되지 않은 문자열을 반환한다는 점에 유의해주세요.

• SCSS

  @mixin inline-animation($duration) {
    $name: inline-#{unique-id()};
  
    @keyframes #{$name} {
      @content;
    }
  
    animation-name: $name;
    animation-duration: $duration;
    animation-iteration-count: infinite;
  }
  
  .pulse {
    @include inline-animation(2s) {
      from { background-color: yellow }
      to { background-color: red }
    }
  }

• CSS

  .pulse {
    animation-name: inline-uzm7qy7ec;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  @keyframes inline-uzm7qy7ec {
    from {
      background-color: yellow;
    }
    to {
      background-color: red;
    }
  }

따옴표가 붙은 문자열 (Quoted Strings)

따옴표가 붙은 문자열로 보간할 수 있는데, 컴파일 시 문자열 주변의 따옴표는 제거됩니다.

• SCSS

  .example {
    unquoted: #{"string"};
  }

• CSS

  .example {
    unquoted: string;
  }