[scss] BEM 방식으로 깊은 중첩 하기

 

🙄BEM 규칙을 따르고 있다는 가정

---

 

아래와 같이 component 와 component--reversed 가 같은 위치에 있고 자식 요소의 클래스가 같다.

🤗부모의 클래스에 따라서 자식요소의 css를 다르게 주고 싶다면?

 

 

<div class="component">
  <div class="component__child-element"></div>
</div>

<div class="component component--reversed">
  <div class="component__child-element"></div>
</div>

 

 

 

reversed에서 component를 &을 이용해 가져가고 자식 요소에도 component를 같이 가져가고 싶을 때가 있다.

하지만 그렇게 &만을 이용하게 되면 아래의 코드처럼 상위 이름을 그대로 가져가기 때문에 원하던 결과를 얻지 못한다.

/* scss */
.component {
  /* blah blah */
  
  &--reversed {
    /* blah blah */
    
    &__child-element {
      /* blah blah */
    }
  }
}

/* css */
.component {/* blah blah */}
.component--reversed {/* blah blah */}
.component--reversed__child-element {/* blah blah */} !!!!!!!

 

 

 

그럴때 아래와 같이 변수를 만들어 사용하면 된다.

/* scss */
.component {
    $self: &;
    /* blah blah */
    
    &--reversed {
       /* blah blah */
        
        #{ $self }__child-element {
            /* blah blah */
        }
    }  
}

/* css */
.component {/* blah blah */)
.component--reversed {/* blah blah */)
.component--reversed .component__child-element {/* blah blah */)

 

 

 

😀 위의 코드를 좀 더 다듬어 보면 아래와 같이 된다.

/* scss */
.component {
    $self: &;
    /* blah blah */
    
    &--reversed {
       /* blah blah */
        
        #{ $self }__child-element {
            /* blah blah */
        }
    }  
    
    &__child-element { 
    	#{ $self }--reversed & { 
            background: rebeccapurple;
        }
    }
}

/* css */
.component {/* blah blah */)
.component--reversed {/* blah blah */)
.component--reversed .component__child-element {/* blah blah */)

 

😎 TIP!

아래와 같이 클래스명 뒤에 &가 붙으면 부모와 위치가 바뀐다.

&__child-element {
   #{ $self }--reversed & { }
}

따라서 .component__child-element .component--reversed  이게 아니라
.component--reversed .component__child-element  이렇게 변환된다.

 

 

 

아래는 전체 코드다.

 

See the Pen scss scope by goldknow0928 (@goldknow0928) on CodePen.

 

 

 

 

 

---

 

 

 

하지만, 이를 너무 많이 쓰면 좋지 않다.

운영/유지보수 시 클래스명 찾기가 쉽지 않을 수 있기 때문이다.

 

 

 

 

 

 

 

---

출처 : https://css-tricks.com/using-sass-control-scope-bem-naming/

Using Sass to Control Scope With BEM Naming | CSS-Tricks