basic/CSS

Sass Scss

ekgoddldi 2021. 3. 11. 16:26

npm node-sass

.scss 확장자는 기존 css를 작성하는 방식과 유사하다.

반면에 .sass 확장자는 { } ;를 사용하지 않는다.

 

변수 선언은 $변수 이름;

재사용되는 스타일블록은 @mixin 스타일블록명(변수){ 함수내용 }

@include 스타일블록명(값);

&.클래스명은 현재 감싸고 있는 스타일 클래스와 같이 쓰였을 때를 가리킴

ex) .box 안에 &.red라면 .box .red 클래스가 같이 쓰인 경우를 말함

 

@import './경로'; 를 통해 다른 .scss파일을 불러올 수 있다.