[SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기)

[CSS/SASS] - [SCSS]작성법 11 - 상위선택자 &

 

 

$w 변수는 .list 안에선언되었기 때문에 {}안에서만 사용가능합니다.

 

하지만 .list {}안에 중첩되는 선택자들은 하위선택자입니다.

 

이때 @at-root 를 사용해 중첩밖으로 빼내도록 컴파일 가능합니다. 

 

 

.list{
	$w : 100px;
    li{
    	width: $w;
        }
   @at-root .box{
   		width: $w;
   }

컴파일하면 아래와 같습니다.

.list li{
    width: 100px;
}
.box{
   	width: 100px;
}

 

.list  안에 중첩되어 선언되었지만, @at-root  를통해 컴파일시 중첩밖으로 벗어납니다. 

 

 

 

[CSS/SASS] - [SCSS] 작성법 13 - 연산하는 값 사용하기