Variables
스타일시트에서 다시 쓸 정보를 저장하는 수단으로 변수를 지정할 수 있다. 보통은 색깔, 폰트와 같은 것들에 대해 변수를 사용할 수 있고 $를 붙여 변수라는 것을 나타낸다.
Nesting
HTML에서는 명확하게 부모와 자식 관계로 요소들을 연결시킬 수 있지만 CSS에서는 그렇지 못하다.
하지만 Sass에서는 HTML요소들의 관계를 따라서 CSS선택자들을 네스팅 할 수 있다. 하지만 너무 과한 네스팅은 유지보수 하는 것을 힘들게 한다는 것을 명심해야 한다.
그리고 네스팅을 하기 때문에 클래스 명에서 굳이 부모 자식 관계(topId,topIdLeft 등)를 나타낼 필요가 없다.
Modules
Sass요소를 한 파일에서만 사용할 수 있는 것은 물론 아니다. 다른 파일에서 쓰고 싶으면 @use를 이용하면 된다. 이 규칙은 다른 Sass파일을 모듈로서 로드되도록 돕는다. 이 말인 즉슨 모듈로서 로드 된 파일의 변수, mixin, function을 사용할 수 있다는 말이다.
위의 예제에서는 @use 'base';을 styles.scss에서 사용했다. 이렇게 하여 _base.scss의 변수를 사용할 수 있게 되었다.
Mixins
위의 이미지는 Sass버전, 아래는 CSS버전이다. 훨씬 더 간결해졌다.
mixin은 반복해서 사용이 될 CSS선언을 그룹화할 수 있도록 한다. 특히나 CSS3에서 브라우저별로 다른 벤더 프리픽스를 입력할 때 유용하고 CSS속성은 다르지만 지정하는 값이 같을 때 좋다.
위의 예시를 보면 @mixin 선언과 함께 transform이라는 이름을 주었다. 괄호 안에서 $property을 사용했는데 이렇게 함으로써 원하는 속성 값을 전달할 수 있다는 장점도 있다. 이런 식으로 mixin을 만들고 나면 다음부터 @include the name of the mixin로 시작하는 CSS 선언을 사용할 수 있게 된다.
Extend/Inheritance
사실 이 방법이 Sass에서 가장 많이 쓰이는 것 중 하나이다. @extend는 한 세트의 CSS속성을 선택자 간에 공유할 수 있게 한다. 이때 공유하는 규칙들이 연관성이 있어야하고 공유하는 특성은 이유가 있어야 한다. 상세히 보고 싶으면 이곳으로 가자.
위의 예시에서는 .message, .success, .erros, .warning이 @message-shared와 같이 행동하게 된다. 이 방식은 HTML 요소에 복수의 클래스 이름을 쓰지 않도록 만든다.
Operators
CSS에서 수학 연산자의 사용이 유용할 때가 종종 있다. Sass에서도 +,-,*,/,%를 쓸 수 있기 때문에 너비 등을 지정할 때 사용해보자.
[원문으로 확인하기]https://sass-lang.com/guide
