아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (198)
    • Web (145)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (5)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라
Web/Styles

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

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

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

2023. 1. 18. 08:03

 

🙄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  이렇게 변환된다.

 

 

 

아래는 전체 코드다.

 

 

 

 

 

 


 

 

 

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

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

 

 

 

 

 

 

 


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

 

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

Controlling scope is something you probably don't tend to consider when working with CSS and Sass. We have had access to the ampersand (&) for quite some

css-tricks.com

 

728x90
저작자표시 (새창열림)

'Web > Styles' 카테고리의 다른 글

[CSS] 뒤가 투명한 png 이미지 하얗게 변환  (0) 2023.05.31
[CSS] aspect ratio  (0) 2023.04.10
[CSS 방법론] BEM 방식  (0) 2022.11.28
[SVG] svg 백그라운드로 사용하기  (0) 2021.11.18
[CSS] 배경 필터 backdrop-filter  (0) 2021.09.27

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.