Sass(SCSS) CSS Extensions

Property Declarations

CSS와 같은 Sass 에서 속성 선언은 선택자와 일치하는 요소의 스타일 지정 방법을 정의합니다.

• SCSS

  .circle {
    $size: 100px;
    width: $size;
    height: $size;
    border-radius: $size / 2;
  }

• CSS

  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }

보간법(Interpolation)

속성의 이름에는 보간법이 포함될 수 있으며, 필요에 따라 속성을 동적으로 생성할 수 있습니다.

• SCSS

  @mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
      -#{$prefix}-#{$property}: $value;
    }
    #{$property}: $value;
  }
  
  .gray {
    @include prefix(filter, grayscale(50%), moz webkit);
  }

• CSS

  .gray {
    -moz-filter: grayscale(50%);
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
  }

중첩(Nesting)

CSS의 수많은 속성은 일종의 네임 스페이스 역할을 하는 동일한 접두사로 시작합니다. 예를들어 font-family, font-size, font-weight 등을 말합니다. Sass를 사용하면 속성 선언을 중첩할 수 있어 작업을 보다 쉽고 간편하게 수행할 수 있습니다.

• SCSS

  .enlarge {
    font-size: 14px;
    transition: {
      property: font-size;
      duration: 4s;
      delay: 2s;
    }
  
    &:hover { font-size: 36px; }
  }

• CSS

  .enlarge {
    font-size: 14px;
    transition-property: font-size;
    transition-duration: 4s;
    transition-delay: 2s;
  }
  .enlarge:hover {
    font-size: 36px;
  }

아래와 같이 사용할 수도 있습니다.

• SCSS

  .info-page {
    margin: auto {
      bottom: 10px;
      top: 2px;
    }
  }

• CSS

  .info-page {
    margin: auto;
    margin-bottom: 10px;
    margin-top: 2px;
  }

Hidden Declarations

선언된 값이 null 이거나 인용되지 않은 문자열이면 Sass는 해당 선언을 CSS로 컴파일하지 않습니다.

• SCSS

  $rounded-corners: false;
  
  .button {
    border: 1px solid black;
    border-radius: if($rounded-corners, 5px, null);
  }

• CSS

  .button {
    border: 1px solid black;
  }

사용자 정의 속성(Custom Properties)

CSS 변수라고도 하는 CSS 사용자 정의 속성은 선언 값에 거의 모든 텍스트를 허용하는 특이한 선언 구문을 가지고 있습니다. 더욱이 이러한 값을 JavaScript에서 액세스 할 수 있으므로, 어떠한 값오 잠재적으로 사용자와 관련이 있을 수 있습니다.

• SCSS

  $primary: #81899b;
  $accent: #302e24;
  $warn: #dfa612;
  
  :root {
    --primary: #{$primary};
    --accent: #{$accent};
    --warn: #{$warn};
  
    // Even though this looks like a Sass variable, it's valid CSS so it's not
    // evaluated.
    --consumed-by-js: $primary;
  }

• CSS

  :root {
    --primary: #81899b;
    --accent: #302e24;
    --warn: #dfa612;
    --consumed-by-js: $primary;
  }

---

부모 선택자(Parent Selector)

부모 선택자 '&'는 중첩된 선택기에서 외부 선택기를 지칭하는데 사용되는 Sass가 고안한 특수한 선택자입니다.

• SCSS

  .alert {
    // The parent selector can be used to add pseudo-classes to the outer
    // selector.
    &:hover {
      font-weight: bold;
    }
  
    // It can also be used to style the outer selector in a certain context, such
    // as a body set to use a right-to-left language.
    [dir=rtl] & {
      margin-left: 0;
      margin-right: 10px;
    }
  
    // You can even use it as an argument to pseudo-class selectors.
    :not(&) {
      opacity: 0.8;
    }
  }

• CSS

  .alert:hover {
    font-weight: bold;
  }
  [dir=rtl] .alert {
    margin-left: 0;
    margin-right: 10px;
  }
  :not(.alert) {
    opacity: 0.8;
  }

접미사 추가(Adding Suffixes)

상위 선택자를 사용하여 외부 선택자에 추가 접미사를 추가할 수 있습니다. 이는 구조화된 클래스 이름을 사용하는 BEM과 같은 방법을 사용할 때 특히 유용합니다.

• SCSS

  .accordion {
    max-width: 600px;
    margin: 4rem auto;
    width: 90%;
    font-family: "Raleway", sans-serif;
    background: #f4f4f4;
  
    &__copy {
      display: none;
      padding: 1rem 1.5rem 2rem 1.5rem;
      color: gray;
      line-height: 1.6;
      font-size: 14px;
      font-weight: 500;
  
      &--open {
        display: block;
      }
    }
  }

• CSS

  .accordion {
    max-width: 600px;
    margin: 4rem auto;
    width: 90%;
    font-family: "Raleway", sans-serif;
    background: #f4f4f4;
  }
  .accordion__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;
  }
  .accordion__copy--open {
    display: block;
  }

In SassScript

상위 선택자는 SassScript 내에서 사용될 수도 있습니다.

• SCSS

  .main aside:hover,
  .sidebar p{
    parent-selector: &
    // => ((unquote(".main") unquote("aside:hover")),
    //     (unquote(".sidebar") unquote("p")))
  }

• CSS

  .main aside:hover,
  .sidebar p {
    parent-selector: .main aside:hover, .sidebar p;
  }

Advanced Nesting

'&'을 일반 SassScript 표현식으로 사용할 수 있습니다. 이는 다른 선택 도구에서도 이를 함수에 전달하거나 보간법에 포함할 수 있다는 것을 말합니다.

• SCSS

  @mixin unify-parent($child) {
    @at-root #{selector-unify(&, $child)} {
        @content;
      }
    }
  
  .wrapper .field {
    @include unify-parent("input") {
      /* ... */
    }
    @include unify-parent("select") {
      /* ... */
    }
  }

• CSS

  .wrapper input.field {
    /* ... */
  }
  .wrapper select.field {
    /* ... */
  }

---

Placeholder Selector

Sass에는 'placeholder'로 알려진 특별한 종류의 선택자를 가지고 있습니다. 클래스 선택자처럼 보이고 작동하지만 '%'로 시작하고 CSS 컴파일 시 출력되지 않는 다는 점이 다릅니다.

• SCSS

  .alert:hover, %strong-alert {
    font-weight: bold;
  }
  
  %strong-alert:hover {
    color: red;
  }

• CSS

  .alert:hover {
    font-weight: bold;
  }

또 다른 예제.

• SCSS

  %toolbelt {
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) solid;
    padding: 16px 0;
    width: 100%;
  
    &:hover { border: 2px rgba(#000, .5) solid; }
  }
  
  .action-buttons {
    @extend %toolbelt;
    color: #4285f4;
  }
  
  .reset-buttons {
    @extend %toolbelt;
    color: #cddc39;
  }

• CSS

  .action-buttons, .reset-buttons {
    box-sizing: border-box;
    border-top: 1px rgba(0, 0, 0, 0.12) solid;
    padding: 16px 0;
    width: 100%;
  }
  .action-buttons:hover, .reset-buttons:hover {
    border: 2px rgba(0, 0, 0, 0.5) solid;
  }
  
  .action-buttons {
    color: #4285f4;
  }
  
  .reset-buttons {
    color: #cddc39;
  }