최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰


2017. 05. 18 작성




   [ 아톰사용자를 위한 ] SASS 설치와 사용법



SASS 를 사용하기 위해서 node.js 나 플러그인 설치까지는 많은 글들이 있는데 정작 사용하는 방법에 대해서는 나오지 않아서


ATOM ~ node.js ~ sass-autocompile 까지 설치한뒤 사용하여 동작하는 부분을 작성하였다.


주의!!. 글을 읽기전에 아래 3가지 조건에 모두 부합해야 포스팅된 내용처럼 활용할 수 있습니다.


OS : Windows


Editor : ATOM


CSS pre processor  : SASS ( SCSS )




   1. ATOM 설치



https://atom.io/





   2. node.js 설치


잠깐!. node.js가 pc에 설치되어있는지 확인하는 가장 빠른 방법은


   ㄱ. 명령프롬프트(관리자권한) 를 띄우고


   ㄴ. node -v 를 실행해서 버전 정보가 출력되면 이미 설치되어 있는것이다.


만약 정보가 없거나 오류가 나면 설치해야한다.



https://nodejs.org/en/





   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가 제대로 적용됨을 알 수 있다.



댓글