[SASS] 1강 SASS소개 및 설치 - OSSAM강좌

 

 

 

 

 

 

 

1. SASS(Syntactically Awesome StyleSheets)란?

  1) 정의 :  CSS pre-processor(전처리기)로서 CSS반복을 줄여 시간을 절약할 수 있도록 해주는 CSS언어의 확장언어

  2) 장점 : 변수 및 조건문 등의 새로운 문법을 통해 CSS를 구조화하여 작업할 수 있다.

  3) 단점 : 코드가 지저분해질 수 있고, 코드가 많아질수록 유지보수가 어렵다.

 

 

 

 

 

 

 

 

 

 

 

 

 

2. SASS 확장자 및 CSS언어로의 변환이유

  1) SASS의 확장자 : 파일명.scss

  2) 브라우저 사용여부 : 브라우저에서는 css만 인식하기 때문에 [파일명.scss]를 인식하지 못한다. 

                                따라서 [파일명.scss]를 [파일명.css]로 변환해주는 작업을 해야한다.

                                매번 바꿔야하는 불편함이 있는 것은 아니고, 프로그램을 설치하면 자동으로 변경된다.

 

 

 

 

 

 

 

 

 

 

 

3. Ruby를 이용한 SASS

  1) Ruby Installer사이트를 접속하여 설치(MAC컴퓨터는 자체 설치되어 있으므로 설치는 생략한다.)

     주소 : https://rubyinstaller.org/downloads/

Downloads

   

사용자 컴퓨터에 맞는 버전을 잘 선택하여 설치

 

 

 

  2-1) Windows에서의 설치 - cmd([윈도우로고키]+[R])

 

gem install sass

cmd에서 위의 명령어를 작성하고 [Enter]처리

 

  

 

 

 

 

  2-2) MAC에서의 설치 - Ruby가 미리 설치되어 있으므로 바로 처리

 

$ gem install sass

 

 

 

 

 

 

 

 

 

 

4. Ruby를 통한 scss파일을 css파일로 변경하기

  1) 테스트할 폴더를 생성한 후 거기에 scss파일을 만든다. 

     (여기서는 D드라이브에 하위폴더로 [sassTest]폴더를 생성)

   

[sassTest]폴더 안에 [test.scss] 파일을 생성 후 위와 같이 작성

    

$main_color: #ff0000;

div{
    color: $main_color;
}

- 필요시 위의 코드를 복사하여 붙여넣는다.

 

 

 

 

 

 

   2) cmd에서 폴더의 위치를 찾는다.(현재 D드라이브의 [sassTest]폴더)

[d:]이 d드라이드 찾음, cd 폴더명 - 해당폴더 들어감

 

 

 

 

 

 

  3) sass 명령을 통해 [scss]파일을 [css]파일로 변경

 

sass 만든scss파일명.scss 변환될css파일명.css

[test.scss]파일을 [test.css]로 변경

 

 

 

 

 

  4) css파일이 생성됬는지 확인

[test.css]파일이 자동생성된 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. Ruby를 통한 watch 사용

- 매번 바꾸려면 번거로우므로 자동으로 알아서 업데이트 해주는 명령어를 사용하는 것이 좋다.

- 파일 한개만 실시간 업데이트

sass --watch 파일명.scss:파일명.css

 

 

- 폴더 내부의 모든 css들을 실시간 업데이트

sass --watch 폴더명:폴더명

 

 

 

 

1) 파일한개만 실시간으로 업데이트 처리

  - 현재 [test.scss]를 제외하고 모두 삭제

 

sass --watch 파일명.scss:파일명.css

 

[test.scss]파일을 [test.css]로 실시간 변경, cmd는 종료하지 말고 계속 켜놓는다.

 

 

 

 

2) [test.css]가 아까와 같이 자동생성

test.css가 자동으로 생성된 것을 확인

 

 

 

 

 

3) [test.scss]의 색상을 파란색으로 변경

 

 

 

 

 

 

4) cmd확인

 

 

 

 

5) [test.css]확인

[test.css]도 파란색으로 변경된 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. node-ass를 통한 설치

- Node.js와 npm이 install되어 있음을 전제로 한다.

- Visual Studio Code를 통한 터미널사용을 전제로 한다.

 

npm install -g node-sass

 

Visual Studio Code를 통한 터미널사용

 

 

 

 

 

 

 

 

 

7. node-sass를 사용한 watch

- ruby를 사용했을 때와 크게 다르지는 않지면 --ouput이 붙는 것이 다름

 

1) 파일 한개만 실시간 업데이트

 

node-sass --watch 파일명.scss --output 파일명.css

 

 

 

2) 디렉토리(폴더) 전체를 실시간 업데이트

 

$ node-sass --watch 폴더명 --output 폴더명

 

 

 

 

 

 

3) [test.scss]를 css로 변경

 

node-sass --watch test.scss --output test.css

 

 

Visual Studio Code를 통한 터미널에서 watch작성

- 혹시 변경이 잘 안되는 경우 [test.scss]를 수정후 저장

 

 

 

 

 

4) [test.css]가 생성된 것을 확인

수정시 실시간으로 변경되는 것이 확인

 

 

 

 

 

 

 

 

 

8. [VS CODE]의 [LIVE SASS COMPILER]를 사용한 자동 변환

https://ossam5.tistory.com/90?category=897190

[VS CODE] Live Sass Compiler

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.

https://youtu.be/LhokSBByMek