SASS는 뭐고 SCSS는 뭔가?

• CSS Preprocessor (CSS 예비 처리기) 라고 불리는 문법으로
  compiler가 compile 과정에서 css로 변환해준다.

• 대표적으로 CSS PreProcessor에 Less, Sass(SCSS), Stylus가 있다.

• SCSS는 SASS ver.3 에서 등장한 개념으로 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든,
  Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.

SASS vs SCSS

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px
      
=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

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

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

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

• 위 2개의 차이점은 Sass는 선택자의 유효범위를 들여쓰기로 구분하고, SCSS는 {}로 범위를 구분한다.

컴파일 방법

npm install 없이 사용하기

• 앞서 언급했듯 반드시 compile 과정을 통해 SASS(SCSS) => .css 로 변환해주어야한다.

• 이때 Sass compiler를 추가로 설치하는 것이 부담이고 싫을 수 있다. 이를 방지하고자 web(SassMeister)상에서 바로 변환이 가능하다.

node-sass

• 위 방식과 다르게 compiler를 설치하는 방법이다.
  npm install -g node-sass 로 Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리다.

사용법

$ node-sass [옵션] <입력파일경로> [출력파일경로]

// 예시
$ node-sass scss/main.scss public/main.css

• 컴파일하려는 파일의 경로와 컴파일된 파일이 저장될 경로를 설정한다. ([]는 선택사항)

$ node-sass scss/main.scss public/main.css dist/style.css

• 위와같이 여러 출력 경로를 설정할 수 있고

$ node-sass --watch scss/main.scss public/main.css

• 옵션으로 --watch 혹은 -w를 입력하면, 런타임 중 파일을 감시하여 저장 시 자동으로 변경 사항을 컴파일한다. (나머지 옵션은 공홈참조)

문법

$

• $변수이름: 속성값; 으로 정의할 수 있다.

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

@at-root

• 중첩에서 벗어나고 싶을 때 @at-root 키워드를 사용한다.

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

• 예를 들어 위와같이 변수를 공유하고 싶을 때

nested prop

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

• font, magin, padding 등 중복되는 속성을 묶을 수 있다.

!global

• !global 플래그를 사용하면 스코프를 전역을 바꿀 수 있다.

$color: #000;
.box1 {
  $color: #111 !global;		// #111
  background: $color;
}
.box2 {
  background: $color;		// #111
}
.box3 {
  $color: #222;				// #222
  background: $color;
}

• 하지만 기존에 사용하던 전역변수가 먹힐 수 있다.

!default

• 기존값이 설정되어있으면 그것을 쓰겠다는 뜻

$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary;			// red
}

{}

• #{}를 이용해서 코드의 어디든지 변수 값을 넣을 수 있다.

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

• Sass의 내장 함수 unquote()는 문자에서 따옴표를 제거한다.

@import

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

Partial

• 프로젝트가 매우 커지면 .css 파일이 많아지는데 이를 모두 컨파일하면 시간이 매우 오래걸린다.

• 그래서 Sass는 Partials 기능을 지원하는데 파일 이름 앞에 _를 붙여서 @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않는다.

reference

https://heropy.blog/2018/01/31/sass/