[SASS] Node로 sass 시작하기

1. CLI로 sass 설치

1. Node.js 설치가 되어 있어야 됨.
2. npm install sass -g 로 CLI 에 설치.

 

2. sass 버전 확인

$ npm show sass version
$ sass --version

 

3. 해당 디렉토리에 scss -> css 변환

$ sass style.scss style.css

$ sass <변환할 scss 파일명> <변환될 css 파일명> 입력.

폴더 안에 있을 경우,

$ sass scss/style.scss style.css

 

4. sass 보기 , 끝내기

--watch라는 플래그를 넣어 해당 파일 자동으로 변환.

$ sass --watch style.scss:style.css

아래처럼 폴더 내 모든 파일들을 컴파일할 수 있다. sass --watch <input폴더>:<output폴더>

$ sass --watch scss:css

 

sass 실시간 컴파일 끝내려면 ctrl + c

 

추가

sass보기 + css 변환스타일

$ sass --watch scss/style.scss:css/style.css --style compact

 

5. sass 변환스타일

$ sass --style compact scss/style.scss css/style.css

• 변환스타일

  • nested
  • expanded
  • compact
  • compressed

/* nested */
ul {
    font-family: arial;
    color: #333; }
ul li {
    display: inline-block; }

/* expanded */
ul {
    font-family: arial;
    color: #333;
}
ul li {
    display: inline-block;
}
/* compact */
ul { font-family: arial; color:#333; }
ul li { display: inline-block; }

/* compressed */
ul{font-family:arial;color:#333;}ul li{display:inline-block;}

 

#. scss 파일앞에 _.scss포함하는 이유

• _가 있는 파일은 컴파일러 작업 무시.

• 파일명에 _가 붙는 경우 @import 되어 사용할 것임을 암시.

• @import 시에는 _ 를 빼고 경로를 잡아도 인식됨.

  ├── css
  │   └── common.css
  └── scss
  	├── common.scss
  	├── _reset.scss
  	└── _layout.scss
  
  

// common.scss
@charset "utf-8";
@import 'reset';
@import 'layout';

@import 순서대로 스타일이 적용.

$ sass --watch scss:css --style compact

css폴더안에 common.css파일만 생성이 된다.

_가 붙인 scss파일은 컴파일되지 않는다.

 

#. 명령어

// 컴파일 방법
$ sass input.scss output.css

// compact 형식으로 컴파일
$ sass --style compact input.scss out.css

// Map파일 제외하고 컴파일
$ sass --sourcemap=none input.scss output.css

// 자동컴파일 방법
$ sass --watch input.scss:output.css

// 자동으로 Map파일 제외하고 컴파일
$ sass --watch --sourcemap=none input.scss:output.css

// 자동으로 compact형식으로 컴파일
$ sass --watch --style compact input.css

// 자동으로 Map파일 제외하고 compact 형식으로 컴파일
$ sass --watch --sourcemap

 

---

Reference

Sass - CSS Extensions

SASS 변환스타일