SCSS 중첩 벗어나기 - @at-root

어떤 스타일을 중첩 안에서 정의하되, 중첩 밖에 있는 요소에서도 사용해야하는 경우에 쓸 수 있는 문법.

See the Pen rNyMJLY by KimDovi (@ddonni0426) on CodePen.

 

위의 예시를 보면 .box 는 .test-list의 밖에 존재하는 별개의 요소이다.

하지만, test-list 안에서 정의된 변수의 값을 사용했고, .test-list의 유효 범위 안에서 스타일을 정의했다.

이와같이  특정 요소의 자식 요소가 아니더라도 그 안에서 정의된 변수의 값을 사용해야하는 경우에는 @at-root를 사용하여 특정 스타일을 공유 받을 수 있다.