상현
개발 덕후

Sass에서 조부모 선택하기

( 업데이트: )

By

중첩된 형식으로 클래스를 작성하는 것은 관심사 분리에 좋은 방법입니다.

<div class='component'>
  <div class='component__card'>
    <div class='component__name'>John Doe</div>
    <a class='component__button' href='#'>View Profile</a>
  </div>
  <div class='component__card'>
    <div class='component__name'>Jane Doe</div>
    <a class='component__button' href='#'>View Profile</a>
  </div>
</div>Code language: HTML, XML (xml)

해당 .scsss

.component {
  padding: 2vw;
  &__card {
    background-color: #FFF;
  }
  &__name {
    color: #000;
  }
  &__button {
    background-color: blue;
    color: #FFF;
  }
}Code language: PHP (php)

BEM 구문을 사용한다면 &의 사용은 정말 유용합니다. 구성 요소의 CSS 구조를 유지하면서 필요한 경우 대규모 클래스 이름을 쉽게 변경할 수 있습니다.

그렇다면 조부모를 선택하는 방법은?

부모를 선택하는 것은 익숙하게 사용하는 방법이지만 조부모를 선택하는 것을 원할때가 있습니다.

예를 들어 .component:hover로 하위 .component:hover .component_card 이런식으로 구성하고싶을때가 종종있습니다.

하지만 기존 &사용으로는 조부모를 선택하기 어렵고 클래스를 그대로 쓰자니 부모 .component 이름이 변경되면 어떻게 해야할까? 고민이 되기도 합니다.

$variables as selectors

sass를 사용하는 주된 이유중 하나는 변수를 설정할 수 있다는 것입니다.

그런데 이것도 가능합니다.

.component {
  $c: &;
}Code language: PHP (php)

이것을 이용해서 scss의 Interploation 문법을 사용하면 됩니다.

.component {
  $c: &;
  padding: 2vw;

  &_card {
    background-color: #FFF;
    &:hover #{c}_name {
      color: #BADA55;
    }
  }
}Code language: PHP (php)

활용

.grid {
  $g: &;
  &__column {
    $c: &;
    color: #000;
  > div {
      #{$g}:hover & {    
        color: red;
      }
      // Result: .grid:hover .grid__column > div
      
      #{$g}:hover #{$c} {
        color: #blue;
      }
      // Result: .grid__column > div .grid:hover .grid__column
     }
  }
}Code language: PHP (php)
.grid {
  $g: &;
&__column {
    $c: &;
    color: #000;
> div {
      #{$g}:hover & {
        color: red;
      }
      
      @at-root {
        #{$g}:hover #{$c} {
          color: #blue;
        }
        // Result: .grid:hover .grid__column
      }
    }
  }
}Code language: PHP (php)

참고