본문 바로가기

Web/SCSS

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.