Sass(SCSS) At-Rules #4[@extend]

Extend

어떤 특정한 클래스는 다른 클래스의 모든 스타일과 자신의 특정한 스타일을 가져야하는 경우가 있습니다. 예를들어 BEM 방법론(methodology)은 블록(Block) 또는 요소(Element) 클래스와 동일한 요소에 적용되는 수정자 클래스를 권장합니다. 하지만 이것은 복잡한 HTML을 만들 수 있고 두 클래스를 모두 포함하는 것을 잊어버리는 실수를 범하기 쉽습니다. 또한 마크업에 비의미론적인 스타일 문제를 가져올 수 있습니다.

• HTML Markup

  <div class="error error--serious">
    Oh no! You've been hacked!
  </div>

• CSS

  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  
  .error--serious {
    border-width: 3px;
  }

Sass의 @extend를 활용하여 아래와 같이 작성할 수 있습니다.

• Scss

  .error {
    border: 1px #f00;
    background-color: #fdd;
  
    &--serious {
      // @extend .error; error 클래스의 스타일을 상속받아라.
      @extend .error;
      border-width: 3px;
    }
  }

• CSS

  .error, .error--serious {
    border: 1px #f00;
    background-color: #fdd;
  }
  .error--serious {
    border-width: 3px;
  }

하나의 클래스가 다른 클래스를 확장할 때, Sass는 확장되는 클래스와 일치하는 모든 요소를 스타일링합니다. 하나의 클래스 선택자가 다른 클래스 선택자를 확장하는 경우, 이미 확장된 클래스가 있는 HTML의 모든 요소에 확장한 클래스를 추가한 것처럼 작동합니다. 그렇기 때문에 class="error-serious"만 써도 Sass는 class="error"이 있는 것처럼 스타일링합니다.

• Scss

  .error:hover {
    background-color: #fee;
  }
  
  .error--serious {
    @extend .error;
    border-width: 3px;
  }

• CSS

  .error:hover, .error--serious:hover {
    background-color: #fee;
  }
  
  .error--serious {
    border-width: 3px;
  }

---

작동 원리(How It Works)

• Scss

  .content nav.sidebar {
    @extend .info;
  }
  
  // This won't be extended, because `p` is incompatible with `nav`.
  p.info {
    background-color: #dee9fc;
  }
  
  // There's no way to know whether `<div class="guide">` will be inside or
  // outside `<div class="content">`, so Sass generates both to be safe.
  .guide .info {
    border: 1px solid rgba(#000, 0.8);
    border-radius: 2px;
  }
  
  // Sass knows that every element matching "main.content" also matches ".content"
  // and avoids generating unnecessary interleaved selectors.
  main.content .info {
    font-size: 0.8em;
  }

• CSS

  p.info {
    background-color: #dee9fc;
  }
  
  .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar {
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 2px;
  }
  
  main.content .info, main.content nav.sidebar {
    font-size: 0.8em;
  }

---

Placeholder Selectors

선택자 앞에 '.' or '#' 말고 '%'를 사용하여 선택자를 만들 수 있습니다. placeholder 선택자(%)를 사용하면 상속은 할 수 있지만 컴파일 시 출력되지 않습니다.

• Scss

  %box{
    width:100px;
    height:100px;
    background-color:red;
    border:1px solid blue;
  }
  
  .contents-box{
    @extend %box;
    padding:10px;
  }
  
  .hero-box{
    @extend %box;
    padding:20px;
  }

• CSS

  .contents-box, .hero-box{
    width:100px;
    height:100px;
    background-color: red;
    border:1px solid blue;
  }
  .contents-box{
    padding:10px;
  }
  .hero-box{
    padding:20px;
  }