SASS 사용 방법- 정말 편리하고 간편하게 css 개발 가능!

 SASS도 '언어'입니다.

CSS는 프로젝트의 규모가 커지고, html 요소와 그 요소들을 style해주는 css 코드는 많아 질수록 관리가 어려워지게 됩니다.

sass는 큰 프로젝트일 경우에 유용합니다.  

SASS를 사용할 경우 이점.

• 계층적으로 코드를 작성할 수 있어서 코드를 보기가 편해집니다. 
• css 속성의 변수 작성(mixin) 및 조건문 사용이 가능합니다.
• 성능적인 이점은 없습니다. 그보다, 필요 없습니다.

SASS의 큰 특징이라면 브라우저는 표준 css만 읽을 수 있으므로, SASS에 문법에 맞는 코드를 작성하고 CSS로 트랜스컴파일링을 해야한다는 겁니다. 하는 방법은 밑에 설명에 나와 있습니다.

 

SASS 적용 방법

1. npm 초기화

$ npm init -y

 

2. sass 라이브러리 설치

$ npm i sass

설치 및 버전 확인 : $ sass --version

3. 트랜스파일링 할 foo.scss 파일 생성하고 아래와 같이 작성해 봅니다.

그냥 홈 경로에 foo.scss 파일 만들고 아래 코드 넣으면 됩니다.

$font_size: 100px;
$font_color: red;
$max_width: 1025px;
$font_family: 'Zen Dots', cursive;

body {
    font: {
        size: $font_size;
        family: $font_family;
    }
    .just_txt {
        color: $font_color;
    }
}

 

4. sass파일 css로 트랜스파일링 해보기

sass는 브라우저가 인식할 수 없습니다. css로 변환하는 작업이 필요합니다.

sass scss파일이 있는 경로:css파일을 생성할 경로

제가 한 예시

 

 

5.  자동 트랜스파일링 설정 명령어

매번 scss코드를 고칠 때마다 터미널 창에 명령어를 입력하면서 트랜스파일링을 해 줄수는 없습니다. 이 작업을 자동화 해줄 명령어는 아래와 같습니다.

$ sass --watch ./:./

sass-project파일에 있는 scss파일이 변경되면, 이를 감지하고, 자동으로 트랜스파일링을 해서 dist폴더에 최신화 된 css파일을 자동으로 만들어 줍니다.

 

하지만, 이런 명령어를 매 번 입력하면서 개발할 순 없습니다. 편한 plugin이 있으므로 받아서 사용합니다.

Live Sass Compiler를 다운받으면 자동으로 scss파일을 수정하면, 자동으로 컴파일을 해줍니다.

 

OMG..! 브라우저에 scss로 개발한 코드를 실행해 보았습니다.

적용이 잘 되었네요.

제가 설정한 SCSS코드는 다음과 같습니다.

저는 디렉토리 경로를 구조화하고 SCSS를 --watch 옵션으로 수정이 될 때마다 트랜스파일링이 되도록 하고 개발을 했습니다.

명령어는 아래 그림에 터미널창에 나와있습니다.