SASS & SCSS 란?

SASS & SCSS란?

SASS이전에 CSS가 있습니다. CSS는 웹을 꾸며줄 때 사용하는 스타일 언어입니다. 하지만 CSS는 태그 안에 태그, 그 태그 안에 태그처럼 중첩되는 태그들이 많아질 때 코드가 점점길어지고 가독성이 떨어지게 됩니다. CSS 는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 전처리기가 도움이 될 수 있습니다. 이 전처리기를 우리는 SASS(SCSS)라고 부릅니다.

 

SASS(SCSS)는 CSS에서 프로그래밍 요소를 추가한 언어라고 생각하면됩니다. for, if문 등등을 활용하여 웹을 꾸밀 수 있습니다.

 

SASS와 SCSS의 차이점은 중괄호( { } )와, 세이콜론(;) 유무 입니다.

 

간단한 예시

SASS

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

SCSS

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

CSS(SASS & SCSS 컴파일)

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

위에 예제처럼 SASS와 SCSS는 중괄호와 세미콜론 유무차이이고 자주사용하는 스타일은 변수처럼 저장해서 사용할 수 있습니다.

참고: 위키백과

컴파일 방법

SassMeister

SASS(SCSS)를 간단하게 테스트만 할려하는데 파일을 생성해서 컴파일하기는 너무 귀찮을경우 간단한 테스트만을 하기위해 사용하는 사이트입니다.

node-sass

node-sass는 Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리 입니다.

$ npm install -g node-sass

설치후에 sass를 작성한 후에 

$ node-sass [옵션] <입력파일경로> [출력파일경로]
$ node-sass scss/main.scss public/main.css

첫줄은 예시이고 작성은 두번째줄처럼 작성하면됩니다.

대표적인 옵션으로 -w & --watch가 있는데 이는 실시간으로 파일 변경을 감시하여 저장할 때 자동으로 컴파일해주는 옵션입니다. 다양한 옵션들이 있으니 sass Github에 들어가서 체크해보는것을 추천드립니다.

번들러(parcel & webpack)

parcel과 webpack은 내가 작성한 코드(파일)들을 컴파일해주는 도구입니다.

parcel은 비교적으로 작은 프로젝트에서 자주 사용하고 webpack은 세세하게 설정할 수 있으므로 대규모 프로젝트에서 자주 사용하는 번들러입니다.

webpack 공식사이트

parcel을 전역으로 설치해줍니다.

$ npm install -g parcel-bundler

위에 node-sass처럼 전역으로 설치했다면 패스하시면되고 설치를 하지 않았다면 프로젝트에 설치를 해줍니다. 

$ npm install --save-dev node-sass

이제 HTML에 sass파일을 연결시킨 다음에

$ parcel index.html

dist/ 폴더가 생성되며 CSS로 컴파일된 파일이 생깁니다.