Sass(SCSS)란, 사용법

HTML 의 화면의 디자인 적인 요소로 사용되는 CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로써, 웹 화면의 표현을 간편하면서, 레이아웃과 스타일을 정의할 때의 자유도가 높다고 할 수 있다.

그리고 편리하 사용성은 누구나 쉽게 접근하여 사용할 수 있지만, 들어갈 수록 그 복잡함도 함께 커지게 된다.

이러한 CSS는 W3C의 표준 스타일시트로 활용되고 웹 표현에 필수 요소 이기에 반드시 사용해야 하지만, CSS의 불편한 부분을 보완하고 편의성을 높인 CSS 전(Pre)처리기가 나오게 되었고, 이것이 Sass/SCSS이다.

* CSS 전처리란 CSS가 동작하기 전, 즉 개발 단계에서 이 전처리 언어인 SCSS를 사용하고 실제 웹에서는 CSS로 변환해서 동작되는 것을 의미한다.

 

Sass/SCSS를 사용하는 이유

아래 그림을 보면 CSS가 전처리기 포함해서 사용되는 추이를 알 수 있다. 여기에서 가장 많이 사용되는 CSS 전처리기 Sass(SCSS) > CSS(전처리 사용않함) > Less > Stylus 순이다.

 

CSS 사용 비중

모든 전처리기는 개발시 코드를 사용하는데, 빌드시점인 컴파일시 CSS로 전환이 되는데, 이때 CSS호환성이 유지되어야 한다. 만약 부분적으로 호환이 되지 않는다거나, CSS에서 다른 결과가 나타나게 되면, 사용한 의미가 없어지게 된다.

물론 Less, Stylus를 사용하여도 무방하다. 하지만 현재 가장 많은 비중을 찾지하는 Sass(Syntactically Awesome Style Sheets)는 가장 높은 호환성을 유지하고 있기 때문에 많은 개발자들이 사용하고 있다고 할 수 있으므로, Sass를 사용하는 것이 가장 바람직 할 수 있다.

그리고 SCSS는 Sass의 3버전에 나온 Sass의 모든 기능을 지원하고 부분적으로 코드 작성을 변경해 편이성을 더욱 높인 버전이라고 할 수 있다.

Sass와 SCSS의 개발 코드의 차이점은 다음과 같다.

Sass 코드

a
  display: block
  font-size: 1px
  span
    color: red

SCSS 코드

a{
  display: block;
  font-size: 1px;
  span {
    color: red;
    }
}

 

코드를 보면 Sass는 선택자의 유효범위를 들어쓰기와 줄바꿈으로 구분을 하고, SCSS는 중괄호, 세미콜론을 코드에 사용하게된다.

이외에는 거희 차이가 없다고 생각하시면 되기 때문에 Sass를 사용할지 SCSS를 사용할지는 본인의 개발 환경에 맞춰 결정하기 바란다. 필자는 중괄호와 세미콜론으로 코드의 실행 구분이 명확이 되는 SCSS를 추천한다.

 

Svelte에서 SCSS 사용하기

Svelte 기준으로 SCSS를 사용한다면, 전처리기를 사용할 수 있도록 svelte-preprocess를 설치하면, 전처리 준비가 완료된다. 여기에 우리가 사용할 SCSS인 node-sass를 설치해주면 된다.

npm install -D svelte-preprocess node-sass

 

이후 롤업 설정 파일에 아래 내용을 추가하자.

import preprocess from 'svelte-preprocess';

const config = {
  preprocess: preprocess({ ... })
}

export default config;

 

이제 svelte 에서 다음과 같이 사용이 가능하다.

<style type="scss">
	/* 여기에 SCSS 작성*/
</style>