SCSS & 선택자에 대해

리액트 컴포넌트 라이브러리 개발을 하다가 CSS에서 &가 자주 보이는걸 발견했다. 찾아보니 CSS의 문법은 아니고 SCSS의 문법이라고 한다. 지금 쓰고있는 Styled Component에서는 SCSS의 문법을 사용할 수 있다고 하니 공부해보기로 했다.

&는 SCSS에서 매우 유용한 기능이라고 한다. 보통 중첩(nesting)할 때 사용된다고 하는데 사용법을 알고 있으면 시간 절약이 가능하다고 합니다. 간단한 예제를 통해서 더 알아보도록 하겠다.

Basic Nesting

.parent { 
	.child{} 
}

이것은 css에서 다음과 같이 컴파일 됩니다.

.parent .child {}

원하는 만큼 중첩할 수 있지만 한 두단계만 유지하는 것이 좋다고 한다.(유용성이 떨어지고 재정의하기 어렵기 때문에)

Adding another class

&는 nesting할 때 다음과 같이 두 개의 클래스를 '둘 다' 가진 요소와 같이 구체적인 선택자를 만들려는 경우에 유용하다.

.some-class.another-class { }

위와 같은 css문을 &을 사용함으로써 아래와 같이 nesting할 수 있다.

.some-class { 
	&.another-class {} 
}

&는 nesting 할 때 항상 부모 선택자를 참조합니다. 아래와 같이 &가 제거되고 상위 선택자로 대체되는 것으로 생각하면 쉽습니다.

 

The "aha" Moment!

.parent { 
	.child {} 
}

이 코드는 실제로 아래의 코드와 같이 &를 사용한 nesting한 약자로 생각할 수 있다.

.parent { 
	& .child {} 
}

따라서 두 코드 모두 아래와 같이 동일하게 컴파일됩니다.

.parent .child {}

&가 있는 코드와 &가 없는 코드는 다르지 않습니다.

Using the `&` with pseudo classes

&를 사용하여 덜 반복적인 방식으로 클래스에 가상 클래스를 사용할 수 있습니다.

.button { 
	&:visited { } 
    &:hover { } 
    &:active { } 
}

.button:visited { } 
.button:hover { } 
.button:active { }

&를 사용하여 .button을 반복하지않고 배치할 수 있습니다.

Using the & with >, +, and ~

&는 > + ~를 사용하여 자식 태그를 찾을 수 있습니다.

.button { 
	& > span { } 
    & + span { } 
    & ~ span { } 
}

.button { 
	> span { } 
    + span { } 
    ~ span { } 
}

위 두 코드는 아래와 같이 컴파일된다.

.button > span { } 
.button + span { } 
.button ~ span { }

다양한 예제들

.button { 
	body.page-about & { } 
}

body.page-about .button {}

 

.parent { 
	.child { 
    	& div & & > a {} 
    } 
}

.parent .child div .parent .child .parent .child > a {}

 

.parent { 
	.child { 
    	.grand-child & { 
        	&.sibling { } 
        } 
    } 
}

.grand-child .parent .child.sibling {}

 

.btn { 
    &-primary {} 
    &-secondary {} 
}

.btn-primary {} 
.btn-secondary {}

 

프론트엔드는 공부하면 할수록 너무 범위가 광범위한거같다...