Sass(SCSS) 개요

1.  SCSS 개요

CSS는 분명 쉽고 재밌지만, 작업이 고도화될수록 불편함도 같이 커지고, 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 생긴다.

 

- CSS Preprocessor란?

CSS 전(예비)처리기라고도 하고 보톤 CSS Proprocessor라고 부른다.

CSS가 동작하기 전에 사용하는 기능으로,웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있다.

 

<어떻게 사용하나요?>

우선 전처리기로 작성(코딩)한다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.

단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일한다.
전처리기로 작성하고 CSS로 컴파일해서 동작시키는 원리!

 

<왜 Sass(SCSS)인가?>

보통 언급되는 전처리기 3대장으로 Less, Sass(SCSS), Stylus가 있다.

문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능하다.
또한, 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭하다.

 

2. Sass와 SCSS차이점

SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset)이다.

즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

 

(1) 더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다.

- Sass :

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

- SCSS :

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분

 

 

(2) 거의 유일합니다만, 다른 차이도 있다.
아래는 Mixins(‘믹스인’은 재사용 가능한 기능을 만드는 방식의 의미합니다) 예제이다.
Sass는 단축 구문으로 사용합니다.

- Sass :

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

- SCSS :

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Sass는 =와 + 기호로 Mixins 기능을 사용했고, SCSS는 @mixin과 @include로 기능을 사용했다.

 

 

---

3. 컴파일 - SassMeister

Sass(SCSS)는 웹에서 직접 동작할 수 없다.
어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 한다.

www.sassmeister.com/ 에 접속해서 Options에 SCSS, libsas v3.5.4를 선택

페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환된다.

 

 

4. 컴파일 - Parcel

웹 애플리케이션 번들러 Parcel은 굉장히 단순하게 컴파일할 수 있다.

Parcel에 대한 자세한 내용은 heropy.blog/2018/01/20/parcel-1-start/ 를 참고 해라!

 

우선 Parcel를 전역으로 설치한다.

$ npm install -g parcel-bundler

프로젝트에 Sass 컴파일러(node-sass)를 설치한다.

$ npm install --save-dev node-sass

 

이제 HTML에 <link>로 Sass 파일만 연결