CSS/SASS
[SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기)
알찬 퍼블리셔
2019. 6. 17. 14:34
728x90
반응형
[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 를통해 컴파일시 중첩밖으로 벗어납니다.
728x90
반응형