SASS 설치

----윈도우OS------

 

STEP1. 먼저 ruby언어 설치

rubyinstaller.org/

RubyInstaller for Windows

- 사이트에서 download 버튼 클릭
- without devkit 에서 Ruby 3.0.1-1 (x64) 눌러서 다운받기

※다운 받은 후 설치 시 제일 마지막 부분에 체크해제

 

 

STEP2. cmd창에서 gem install sass 입력해서 sass 설치(윈도우 + R키)

STEP3 - sass -v 로 설치된 버전정보 확인

 

 

-----맥OS------

step1 - 기본적으로 루비가 설치되어 있음.. 이과정 스킵

step2 - 터미널창에서 sudo gem install sass

 

 

---

| SASS 자동 컴파일 방법

​step1 -- 작업폴더를 하나 만듬 폴더구조는 index.html / css폴더 / scss폴더

step2 -- 해당작업폴더를 shift+오른클릭 --->여기서 명령창열기 실행

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

​

​아래는 sass를 css로 자동 컴파일해주는 명렁어입니다.

터미널창에 아래와 같이 입력하면 됩니다.

sass --watch -E utf-8 scss/style.scss:css/style.css

 

 

---

Sass와 Scss

: 코드 차이는 없지만 중괄호 차이

 

SASS : 코드입력시 중괄호 생략

SCSS : 코드입력시 중괄호 입력

 

SCSS 문법으로 작성된 코드를 실시간으로 일반 css 파일로 변환

-HTML파일은 css파일밖에 인식을 못합니다.

※보통 실무에서는 일반적으로 코드 가독성이 좀더 좋은 scss로 작업을 진행하는 편입니다.

 

---

사용예시

0. index.html 파일 / css폴더에 style_origin.css, reset_origin.css / scss폴더에 style.scss 파일 만들어주기

 

1. style.css는 watch로 사스연결하면 자동으로 만들어지니깐, style.css는 따로 만들지 말기

-watch를 하면 css코드는 없어지니깐 style_origin.css라고 따로 만든거임

-style.css가 만들어지면 style_origin.css 소스를 style.css 파일로 붙여넣기

style.scss에 이런 형식으로

(reset.css는 reset.scss에 복사붙여넣기)

-그런 후 origin.css 파일들은 삭제

 

 

2. SCSS 문법으로 작성된 코드를 실시간으로 일반 css파일로 변환하려면

터미널에 sass --watch -E utf-8 scss/style.scss:css/style.css 를 입력해야 실시간 watch이 됨

그런 후 저장

 

(저장 후 scss에서 코드 입력하면 실시간으로 css파일로 변환됨)

 

 

 

watch문 중지하기

터미널창에서 키보드 ctrl+c 누른 후 y입력하고 엔터하면 scss변환 watch가 중지됨

 

 

watch 다시 연결하기

터미널창에서 키보드 위 방향키 입력시 이전 입력했던 명령어들이 차례로 선택됨

watch문 선택하고 다시 엔터