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

[CSS/SASS] - [SCSS]작성법 10 - 주석

 

 

중첩 안에서 상위(부모)선택자를 참조할 때 & 기호를 사용합니다.

 

 

 

.button{
	color:#000;
	&:hover{
    	color:red;
    }

}

위와 같이 작성하며

컴파일 결과는 아래와 같습니다.

 

 

.button{
	color:#000;
}
.button:hover{
    	color:red;
    }

 

 

또한 응용하여 아래와 같이 작성가능합니다. 

.font{
	&-12{font-size:12px;}
    &-15{font-size:15px;}
    &-18{font-size:18px;}
    &-20{font-size:20px;}
}

.font-12{font-size:12px;}
.font-15{font-size:15px;}
.font-18{font-size:18px;}
.font-20{font-size:20px;}

 

 

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