& Ampersand

상위 선택자 참조.

 

ex 1)

.btn {
	position : absolute;
}

.btn.active {
	color : blue;
}


/* Ampersand 활용 */

.btn{
	position : absolute;
    
    // & 가 btn으로 치환된다. 
    &.active{
    	color : blue;
    }
}

 

ex 2)

.list li : last-child {
	margin : 20px;
}

/* Ampersand 적용 */
.list {
	li{
    	// &가 li로 치환된다. 
    	&:last-child{
    		margin : 20px;
        }
    }
}

 

출처 :

https://sso-feeling.tistory.com/232

https://velog.io/@jch9537/CSS-SCSS-SASS

 

[SCSS]Ampersand &(상위 선택자 참조)

CSS에서는 .btn클래스와 .active클래스를 같이 가지고 있는 것이 있다. SCSS에서는 &기호를 사용하여 표현한다. &가 상위 태그로 치환이 된다. 첫번째는 .btn으로 치환되고 두번쨰는 li로 치환이 되는

sso-feeling.tistory.com

 

728x90

'WEB > CSS' 카테고리의 다른 글

[SCSS] SCSS 문법 정리  (0) 2024.06.27
[ Web : CSS ] positon  (0) 2022.07.27
[ Web : CSS ] flexbox  (0) 2021.11.29
[ Web - CSS media queries ] 반응형 웹  (0) 2021.11.17

+ Recent posts