Martin`s Work

[SASS] CSS 전처리 개념 및 설치 본문

CSS&CSS3/SASS

[SASS] CSS 전처리 개념 및 설치

Martin`s Work 2017. 4. 6. 11:26

SASS 개념


웹페이지의 규모가 커지면 그 css 문서의 양이 방대해지며, 소스의 관리, 중복 작업등이 많아진다. 이러한 이유 때문에 CSS 전처기가 등장하였다. CSS 전처기에는 대표적으로 Sass, Less 등이 있다. CSS 전처리는 스크립트처럼 특정 속성값을 변수에 담아 필요한 곳에서 적용할 수 있어, 중복 작업 혹은 반복 작업을 줄일 수 있다. 


SASS 설치


1. Ruby 설치


SASS는 Ruby 라는 언어로 만들어져 있어 SASS 파일을 CSS로 컴파일 시키려면 Ruby라는 언어가 내 컴퓨터에 설치 되어있어야 한다. (링크 : http://rubyinstaller.org/downloads/)


2. SASS 설치


Ruby의 설치가 완료되면 cmd 창에서 아래의 명령어를 이용하여 SASS 를 설치한다.


1
gem install sass
cs


이로써 Window 환경에서 SASS를 사용할 수 있다.


SASS 파일 CSS 파일로 컴파일


1. 에디터 이용 


[Atom]


Atom 에서 install packages 에서 "sass-autocompile"을 검색한다.




위에서 첫번째 제작자 "armin-pfaeffle" 인 것을 install 한다. 위의 툴을 받으면 자동으로 min.css 파일로 컴파일 시켜준다.


** 위의 방법대로 안되었을 경우 Nodejs를 설치 후에 Nodejs sass를 설치해야한다.


1.NodeJS 설치


위의 방법대로 진행하였을때, Atom에서 sass- autocomplie로 저장을 하였을 때 에러메시지가 뜬다. 그럴때 NodeJS를 설치 후에 진행하면 정상적으로 저장이 되며, min.css로 컴파일 된다. (링크:  https://nodejs.org/en/)


2.Node Sass 설치


npm install -g node-sass
cs


NodeJS가 설치되었으면 Node-Sass를 설치해야 한다. cmd를 실행 후, 위의 명령어를 치면 자동으로 설치가 되며, Atom에서 정상적으로 auto-complie 되는 것을 볼 수 있다.


[출처]

SASS 공식 홈페이지 - http://sass-lang.com/

https://velopert.com/1712 

[설치법] https://hackya.com/kr/sass-scss-%EC%BB%B4%ED%8C%8C%EC%9D%BC-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/

'CSS&CSS3 > SASS' 카테고리의 다른 글

[SASS] 변수와 함수 작성  (0) 2017.04.06
Comments