[SASS] 3강 SASS의 CSS작성스타일 설정

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 기본 watch를 써서 CSS로 변환하는 경우 코드 기록

 

- SASS로 스타일을 변환시 평소 적던 CSS처럼 적혀지지 않아서 코드가 지저분해질 수 있다.

- 코드를 추가하여 CSS코드를 깔끔하게 정리해보자

 

D드라이브에 [sassTest]라는 폴더를 찾아서 watch를 실행

 

[test.scss]파일에 위와 같이 작성

 

 

[test.css]에 이런 방식으로 CSS가 기록됨

 

 

 

 

 

 

 

 

 

 

 

 

 

2. SASS의 CSS기록 스타일 변환 코드

 

sass --watch scss파일명:css파일명 --style 스타일종류

 

- 종류는 nested, expanded, compact, compressed 이렇게 4가지 방법이 있다.

 

 

 

 

1) nested

 

- 문법

sass --watch scss파일명:css파일명 --style nested

 

 

 

- cmd에서의 코드

 

sass --watch test.scss:test.css --style nested

 

 

 

 

- test.css 코드 - 기본값과 같이 처리됨

h1 {
  color: red;
  background-color: yellow; }

p {
  color: red;
  background-color: yellow; }

/*# sourceMappingURL=test.css.map */

 

 

 

 

 

 

 

 

 

2) expanded

 

- 문법

 

sass --watch scss파일명:css파일명 --style expanded

 

 

 

- cmd에서의 코드

 

sass --watch test.scss:test.css --style expanded

 

 

 

- test.css 코드

 

h1 {
  color: red;
  background-color: yellow;
}

p {
  color: red;
  background-color: yellow;
}

/*# sourceMappingURL=test.css.map */

 

 

 

 

 

 

 

 

 

 

3) compact

 

- 문법

 

sass --watch scss파일명:css파일명 --style compact

 

 

- cmd에서의 코드

 

sass --watch test.scss:test.css --style compact

 

 

 

- test.css 코드

 

h1 { color: red; background-color: yellow; }

p { color: red; background-color: yellow; }

/*# sourceMappingURL=test.css.map */

 

 

 

 

 

 

 

 

 

 

4) compressed

 

- 문법

 

sass --watch scss파일명:css파일명 --style compressed

 

 

 

 

- cmd에서의 코드

 

sass --watch test.scss:test.css --style compressed

 

 

 

 

- test.css 코드

 

h1{color:red;background-color:#ff0}p{color:red;background-color:#ff0}
/*# sourceMappingURL=test.css.map */

 

 

 

*** 혹시 변화가 없다면 [test.scss]를 수정하면 변화된다.

*** cmd에서 기존 sass를 벗어나고 싶다면 [ctrl]+[c]를 누른다.

 

 

 

 

 

 

 

 

 

 

 

3. 마지막에 적혀지는 파일명.css.map 없애기

- sourceMappingURL 지우기

 

 

1) 기존 css코드 - 예시 compact방식

 

h1 { color: red; background-color: yellow; }

p { color: red; background-color: yellow; }

/*# sourceMappingURL=test.css.map */

- 아래 적힌 주석을 없애자

 

 

 

 

2) sourceMappingURL 지우는 문법

 

 

- 문법

sass --watch scss파일명:css파일명 --style compact --sourcemap=none

 

 

- cmd에서 작성

 

sass --watch test.scss:test.css --style compact --sourcemap=none

 

 

 

 

- test.css 결과

 

h1 { color: red; background-color: yellow; }

p { color: red; background-color: yellow; }

 

 

 

 

** 위 방법들은 [VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다.