Sass 명령어 기초 배우기

Sass 명령어 알아보기

이 포스팅에서는 사스에서 자주사용되는 명령어에 대해 알아봅니다.

CSS 출력 style 지정 사용방법

.scss 파일을 작성한 후에 css로 컴파일을 하기 위해서는 간단한 sass 명령어를 사용해야하는데 이에 대해 알아보도록 하자.

명령어 작성

ㆍ cmd 창에서 아래의 명령어를 입력한다.

sass –-style style종류 (작성된)파일명.scss (변환될)파일명.css

$ sass –-style compact test.scss:test.css

다음의 코드는 예를 들어서 본인의 로컬 디렉토리에 sass 폴더가 있고 컴파일된 css파일을 다른 디렉토리로 이동하고자 할때

(주의 : 터미널,cmd 창에서 sass 파일이 있는 디렉토리를 기준으로 작성한 것입니다)

그리고 해당 .scss 파일을 수정할때 마다 .css 파일로 변환하는 작업이 번거롭다면 다음의 --watch 명령어를 실행해 준다.

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

cmd 나 터미널창에서 위의 코드를 실행하면 .scss 파일을 수정할때 마다 .css 파일로 자동 컴파일 해 줄 것이다.

style 종류까지 설정할 경우에는 다음과 같이 작성합니다.

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

약어로 입력하기

$ sass -w -t compact style.scss
$ sass -w -t compact style.scss:style.css

위에서 style 종류는 세가지 타입이 있는데 대개 작업자 스타일 선호도에 따라 지정해 주면 된다.

스타일 종류

ㆍ 중첩(nested) : sass의 기본스타일로 html문서처럼 부모요소에 대한 하위요소는 들여쓰기 되는 형식.

ㆍ 확장(expanded) : 일반적인 css 스타일로 선택자에 따라 속성이 들여쓰기 되는 형식.

ㆍ 축약(compact) : 우리나라 업무에서 가장 많이 사용되는 스타일로 한줄씩 출력되는 스타일.

ㆍ 압축(compress) : 소스 압축 형태의 스타일

각 style 종류에 따른 출력화면을 보자.

중첩(nested) 타입	확장(extended) 타입	축약(compact) 타입
.info {       background: #fff; }       info .tit {       font-size: 11px; }  .test2 {       font-color: #000; }	.info {       background: #fff;  }  .info .tit {       font-size: 11px;  }  .test2 {       font-color: #000;  }	.info { background: #fff; }  .info .tit { font-size: 11px; }  .test2 { font-color: #000; }

Import

Sass도 css처럼 import가 가능한데 다른 점이 있다면 css는 import된 각각의 .css파일의 로딩을 http에 요청해야한다면, sass는 여러개의 .scss파일을 import해도 최종적으로는 하나의 .css로 변환해주기 때문에 http에 요청을 여러번 보낼 필요가 없습니다.

작성 방법

 ㆍ @import “파일명.scss”; 

 ㆍ @import “파일명”;

http://sass-lang.com에서는 .scss 파일을 import할 경우, .scss 확장자를 써주지 않아도 된다고 설명하고 있다.

scss (style.scss )	@import css   (style2.scss)	css
@import ‘test2.scss'; //@import ‘test2′;   $color-main:#333;.test {     font-color:$color-main;  }  .test2{     font-color:$color-test;  }	$color-test:#000;	.test{     font-color:#333;  }  .test2{     font-color:#000;  }

위의 테이블을 보면, 변수가 두 번($color-main, $color-test) 사용된 것을 확인 할 수 있다.
첫번째 test.scss파일을 보면 $color-test가 변수 선언되어 있지 않고, 단지 $color-main 변수만 선언 되어 있다.
그런데, 이 파일에 import된 test2.scss 파일을 보니 $color-test라는 변수가 선언되어 있음을 확인 할 수 있다.

이렇게 되면 sass는 style.scss파일이 css로 출력될 때 import된 파일의 내용도 함께 반영해서 출력해주게 된다.
CSS 결과물에 test2.scss에 반영된 $color-test 변수의 속성값이 적용된 것을 보면 알 수 있다.

_호출 차단(Partials) - css 파일로 컴파일 하지 않기

SCSS,SASS 파일 중에 CSS로 컴파일되지 않도록 하게 방법은 _을 붙여주면 됩니다.

기본적으로 SCSS,SASS 파일은 해석되어 CSS로 변경된다.

하지만 SCSS,SASS 파일압페 밑줄(_)이 붙어 있으면 이를 CSS파일로 컴파일 하지 않고 @import 구문이 있는 파일 내부에 css 로 컴파일하여 줍니다.

Scss ↔ Sass 상호 변환하기

$ sass-convert [OPTIONS] [INPUT] [OUTPUT]
$ sass-convert scss/style.scss sass/style.sass

sass-convert 명령어 (옵션 활용) 예시

옵션

-F --from  변경할 파일 문법 (css|sass|scss)

-T --to  변경하여 생성할 파일 문법 (sass|scss)

-R --recursive  하위 디렉토리까지 모두 변환

--indent t   스페이스가 아닌, 탭으로 들여쓰기 (2|t)

디렉토리 이름

sass  [INPUT] 소스 폴더 이름

convert  [OUTPUT] 내보낼 폴더 이름

$ sass-convert -F scss -T sass -R --indent t sass convert

# 컴파일 결과 출력
  convert sass/common/_classes.scss
  create convert/common/_classes.sass
  convert sass/common/_normalize.scss
  create convert/common/_normalize.sass
  convert sass/sass-part/_comments.scss
  create convert/sass-part/_comments.sass
  convert sass/sass-part/_nested.scss
  create convert/sass-part/_nested.sass
  convert sass/style.scss create convert/style.sass

Sourcemap 생성/비생성 옵션 설정

$ sass -w --sourcemap=none sass/style.scss:css/style.css # --sourcemap=none

Compass 설치

# 시스템 업데이트
$ gem update --system

# Compass 설치
$ gem install compass 

Jaehee's e-room

[출처] : http://wit.nts-corp.com/2015/01/09/2936