image: https://www.javascriptwillrule.com/css-sass-vs-scss-which-one-should-you-use/

SASS 란 ?

SASS(Syntactically Awesome StyleSheets) 는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.
CSS는 배우기 쉬워 프로젝트 초기에는 문제가 없지만 프로젝트가 클수록 코드는 복잡해지고, 스타일시트도 같이 관리할게 많아지면서 복잡해진다. 따라서 추가 및 수정 등 유지보수에 힘이 들어간다. SASS는 한마디로 CSS를 구조화하여 개발의 편의성을 높혀준다.

정리를 하면 SASS는...

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.
  
  

SASS 표기법

확장자 .sass

.gridList
  width: 100%
  height: 100%
  li
    margin: 10px
    margin-left: 1.7vw
    box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.2),
            0 1px 1px 0 rgba(0, 0, 0, 0.14),
            0 2px 1px -1px rgba(0, 0, 0, 0.12)
    

SCSS 란 ?

SCSS(Sassy CSS) 는 SASS의 3.0버전부터 도입되어 좀 더 CSS와 친화적인 문법을 제공한다. SCSS는 CSS와 거의 같은 표기법으로 SASS 기능을 지원하여 그냥 SASS와 같다고 봐도 무방하다. 다만, 기존 SASS와의 문법의 조그만한 차이가 있다. SASS 표기법보다 실무에서는 CSS 친화적인 SCSS 표기법를 사용하는 경우가 더 많다고 한다.

SCSS 표기법

확장자 .scss

.gridList {
  width: 100%;
  height: 100%;
  li {
    margin: 10px;
    margin-left: 1.7vw;
    box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.2),
            0 1px 1px 0 rgba(0, 0, 0, 0.14),
            0 2px 1px -1px rgba(0, 0, 0, 0.12);
  }
}

SCSS는 기존 SASS에서 중괄호( {} ) 가 추가되었고, 세미콜론 ( ; )이 추가되었다. 두개만 추가 되었는데도 객체 형식으로 확실히 가독성이 증가하였다.

Compile

SASS, SCSS는 LESS, Stylus와 함께 전처리기이다. 우리가 CSS를 적용하는 웹은 CSS밖에 몰라서 SASS, SCSS, LESS 등은 웹이 읽지 못한다. 따라서 SASS(SCSS)로 작성 후 별도의 컴파일러를 통해 웹이 읽을 수 있는 CSS로 변환 과정이 필요하다.

image: https://velog.io/@jch9537/CSS-SCSS-SASS

다양한 컴파일 방법 중, 실제 내가 사용중인 컴파일러를 소개하고, 코드에서 발취해보았다.

node-sass

node-sass는 Node.js를 컴파일러인 LibSass에 바인딩된 라이브러리이다.
npm으로 설치가 가능하다.

https://github.com/sass/node-sass

$ npm install node-sass

Webpack 환경의 sass-loader

$ npm install --save--dev style-loader css-loader sass-loader

webpack.config

/**
* Sass stylesheet files with source maps.
*/
{
 test: /\.scss$/,
 use: [
     {
       loader: 'style-loader'
     },
     {
       loader: 'css-loader',
       options: {
                   importLoaders: 1,
                   sourceMap: process.env.NODE_ENV
                      === 'development'
                 }
     },
     {
       loader: 'sass-loader',
       options: {
                  sourceMap: process.env.NODE_ENV
                     === 'development'
                 }
     }
      ]
}