티스토리 뷰
2017. 05. 18 작성
[ 아톰사용자를 위한 ] SASS 설치와 사용법
SASS 를 사용하기 위해서 node.js 나 플러그인 설치까지는 많은 글들이 있는데 정작 사용하는 방법에 대해서는 나오지 않아서
ATOM ~ node.js ~ sass-autocompile 까지 설치한뒤 사용하여 동작하는 부분을 작성하였다.
주의!!. 글을 읽기전에 아래 3가지 조건에 모두 부합해야 포스팅된 내용처럼 활용할 수 있습니다.
OS : Windows
Editor : ATOM
CSS pre processor : SASS ( SCSS )
1. ATOM 설치
2. node.js 설치
잠깐!. node.js가 pc에 설치되어있는지 확인하는 가장 빠른 방법은
ㄱ. 명령프롬프트(관리자권한) 를 띄우고
ㄴ. node -v 를 실행해서 버전 정보가 출력되면 이미 설치되어 있는것이다.
만약 정보가 없거나 오류가 나면 설치해야한다.
3. node.js 에서 npm 으로 node-sass 설치하기
명령프롬프트(관리자권한) 를 띄우고
npm install -g node-sass 으로 설치한다.
4. ATOM 에서 sass-autocompile package 설치
ctrl + , > Install 에서 Packages 옵션으로 설정한뒤 sass-autocompile 검색하여 install 한다.
5. SASS 폴더를 만들어서 HTML과 SCSS 작성
SASS 폴더 만들고 File > add Project Folder 로 불러온뒤 아래의 index.html 과 styles.scss 를 작성한다.
#1. styles.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 | $text-color: #FF0000; $bg-color: #eee; $p-color: #333; body{ background-color: $bg-color; color: $text-color; p{ color: $p-color; } } | cs |
sass, scss 는 둘다 문법이 매우 비슷하지만 코드블럭과 세미콜론의 차이정도가 있다.
여기에서는 scss로 사용하였다.
작성을 하고 저장을 하면 아래와 같이 자동으로 폴더에 styles.min.css 가 생성된다.
#2. index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel='stylesheet' href='styles.min.css' /> <title>Document</title> </head> <body> hellow world sass ! <p>this document uses SASS</p> </body> </html> | cs |
주의!! 8번 라인 : 자동으로 생성될 styles.min.css 로 연결해둔다.
6. 결과
css가 제대로 적용됨을 알 수 있다.
