[Sass] Scss 핵심 기능

들어가기전 Sass와 Scss의 차이를 알아보자.

Sass와 Scss는 Nesting구조를 가지고 있지만, 

 

Sass는 indent(들여쓰기)로 구분하기 때문에 tab사용에 예민하니 주의해야 한다.

Scss는 브라켓 {} 으로 구분한다.

 

Variables

$를 붙여 변수를 만들 수 있다.

$작명: 값;  형태로 사용한다.

변수를 사용해서 일관된 스타일을 부여해주고 수정시 값만 변경해주면 된다.

 

 

@mixin

@mixin명령어를 이용해서 스타일 집합을 만들어내고 @include를 통해 불러올 수 있다.

또한 함수처럼 default parameter를 지정 할 수 있고 parameter를 받아 상속을 부여할 수도 있다.

 

 

@function

@function명령어는 말 그대로 함수처럼 사용할 수 있다. 

@return을 통해 결과값을 보내줄 수 있다.

 

 

@extend

@extend는 css속성 집합을 상속 받을 수 있다.

 

 

@use

작업량이 많아 지면, 많은 sass파일이 생긴다. 

이러한 많은 파일들을 @use명령어를 이용해 분할하고 모듈화 시킬 수 있다.

 

🤔  mixin과 extend의 차이

선택자간의 연관성이 존재한다면 @extend,

연관성은 없지만 코드가 겹치는 부분이라면 @mixin으로 소스코드의 중복을 없애기 위해 사용한다.