Web/SCSS (3) 썸네일형 리스트형 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. SCSS 중첩 벗어나기 - @at-root 어떤 스타일을 중첩 안에서 정의하되, 중첩 밖에 있는 요소에서도 사용해야하는 경우에 쓸 수 있는 문법. See the Pen rNyMJLY by KimDovi (@ddonni0426) on CodePen. 위의 예시를 보면 .box 는 .test-list의 밖에 존재하는 별개의 요소이다. 하지만, test-list 안에서 정의된 변수의 값을 사용했고, .test-list의 유효 범위 안에서 스타일을 정의했다. 이와같이 특정 요소의 자식 요소가 아니더라도 그 안에서 정의된 변수의 값을 사용해야하는 경우에는 @at-root를 사용하여 특정 스타일을 공유 받을 수 있다. [Sass로 디자인하라 : 양용석] - Scss 6가지 핵심 기능 요약 Sass와 Scss의 차이는 세미콜론을 붙이느냐, 안 붙이느냐 그리고 대괄호로 묶어주냐 마냐이다. 전자가 Scss이다. 1. 변수를 사용할 수 있다. 변수 정의 시 $기호 사용한다. $font-stack: nanum-gothic, sans-serif; $primary-color:#333; $url-images: 'assets/images/'; body{ font:100% $font-stack; color:$primary-color; background: $primary-color url($url-images + 'img-names.jpg'); } 2. 중첩이 가능하다. $default-color:#999; $navhover-color:#333; nav{ ul{ list-style:none; li{ dis.. 이전 1 다음