SASS / 변환 스타일 - nested, expanded, compact, compressed
변환 스타일
SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다.
- nested
- expanded
- compact
- compressed
다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다.
ul { font-family: Georgia; color: #333333; li { display: inline-block; } }
nested
sass style.scss:style.css --style nested
기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul li 앞에 공백이 더 있다는 것이 특징입니다.
ul { font-family: Georgia; color: #333333; } ul li { display: inline-block; }
expanded
sass style.scss:style.css --style expanded
계층 구조라 하더라도 선택자 앞에, 즉 ul li 앞에 공백이 없습니다.
ul { font-family: Georgia; color: #333333; } ul li { display: inline-block; }
compact
sass style.scss:style.css --style compact
선언이 여러 개 있어도 줄바꿈을 하지 않습니다.
ul { font-family: Georgia; color: #333333; } ul li { display: inline-block; }
compressed
sass style.scss:style.css --style compressed
불필요한 공백을 모두 제거합니다.
ul{font-family:Georgia;color:#333333}ul li{display:inline-block}
sourceMappingURL 지우기
SCSS 파일을 CSS 파일로 변환하면 map 파일이 생성되고, 변환된 CSS 파일 제일 밑에 다음과 같은 주석이 생성됩니다.
/*# sourceMappingURL=style.css.map */
만약 변환할 때 위 코드가 생성되지 않게 하려면
--sourcemap=none
옵션을 붙이면 됩니다.
sass style.scss:style.css --style compressed --sourcemap=none