scss(2)
-
Scss @mixin 활용하기
프로젝트에서 공통적으로 사용되는 스타일을 믹스인을 사용하여 정의할 수 있다. 1. 믹스인 안에서도 &를 사용해 상위 요소를 참조할 수 있고, include를 사용하는 시점에서 &가 가리키는 요소가 결정된다. See the Pen jOBMoxm by KimDovi (@ddonni0426) on CodePen. 2. 가변인수를 통해 공통된 스타일 속성을 다양하게 적용시킬 수 있다. See the Pen eYvdaoK by KimDovi (@ddonni0426) on CodePen. 3. @content 키워드를 사용해서 일부분만 스타일 블록을 전달할 수 있다. See the Pen poeEXeZ by KimDovi (@ddonni0426) on CodePen.
2021.05.19 -
SCSS 중첩 벗어나기 - @at-root
어떤 스타일을 중첩 안에서 정의하되, 중첩 밖에 있는 요소에서도 사용해야하는 경우에 쓸 수 있는 문법. See the Pen rNyMJLY by KimDovi (@ddonni0426) on CodePen. 위의 예시를 보면 .box 는 .test-list의 밖에 존재하는 별개의 요소이다. 하지만, test-list 안에서 정의된 변수의 값을 사용했고, .test-list의 유효 범위 안에서 스타일을 정의했다. 이와같이 특정 요소의 자식 요소가 아니더라도 그 안에서 정의된 변수의 값을 사용해야하는 경우에는 @at-root를 사용하여 특정 스타일을 공유 받을 수 있다.
2021.05.18