[SCSS] Interploation 문법으로 조부모 선택하기

.Article {

  &List {} //.ArticleList

  &__thumb { //.Article__thumb
  	&:hover &-img {} //.Article__thumb:hover .Article__thumb-img
  }

  &__title { //.Article__title
    &-container {} //.Article__title-container
  }

  &__content {} // .Article__content

SCSS의 중첩 기능과 부모 선택자 참조는 편리하고 강력한 기능입니다. 특히BEM(Block-Element-Modifier) 방식과 부모 선택자 &는 굉장히 궁합이 좋아, 유지보수를 효율적으로 할 수 있게끔 만들어줍니다.

      <li className='Article'>
        <Link href={props.link}>
          <div className='Article__thumb'>
            <Image
              className='Article__thumb-img'
              src={SAMPLE01}
              alt='thumbnail image'
            />
          </div>
        </Link>
      </li>

그런데 SCSS는 부모 선택자까지만 지원하기 때문에, BEM 방식을 사용하였을 때
다음과 같은 마크업에서.Article이 :hover 상태일 때의 .Article__thumb-img에 스타일을 주고 싶을 때는 조금 난감한 부분이 있었습니다🤔

.Article {
  &:hover{
    &__thumb{
      &-img{
        transform: scale(1.15);
      }
    }
  }

  &__thumb {
    width: 100%;
    height: 18.2rem;
    position: relative;
    border-radius: 1.6rem;
    overflow: hidden;
 }

지금까지는 다음과 같이 부모 선택자 + 중첩을 이용하여 스타일링을 해왔었습니다.
힌 엘리먼트에 대한 스타일을 선언하는 것 뿐인데, 위치가 흩어져 있으니 한번에 스타일을 파악하기 어렵고 유지보수를 할 때에도 약간의 악영향을 주었습니다.
예시에는 :hover 밖에 없지만, 만약 :focus와 :active 상태까지 들어간다면?... 🙃

SCSS의 보간법(문자열에 그대로 변수를 삽입해 주는 SCSS 문법!)을 사용하면 이 문제를 효율적으로 해결할 수 있다는 글을 보고 적용해 보기로 하였습니다.

.Article {
  $Article: &; // $Article: .Article

  &__thumb { // .Article__thumb
    width: 100%;
    height: 18.2rem;
    position: relative;
    border-radius: 1.6rem;
    overflow: hidden;

    #{$Article}:hover &-img { //.Article:hover Article__thumb-img
      transform: scale(1.15);
    }

변수에 조부모 선택자(.Article)을 담아 주고,
보간법을 이용해 자바스크립트 쓰듯이 변수를 대입해 주면 끝! 😎 얼핏 봐도 중첩이 훨씬 적어졌습니다.

개인적인 생각으로는, 실무 협업에 사용하려면
$parent: &;, $a: &; 같이 변수명을 적는 것 보다 변수가 무엇을 담고 있는지를 직관적으로 보여주는 것이 좋을 것 같아
변수명을 클래스 네임 그대로 사용해 주었는데 실무에서 사용하시는 분들은 어떻게 사용하시는지 궁금하네요 😮‍💨

• 참고자료
  https://hyeon.pro/dev/sass-grandparent-selectors/