Main menu

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 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

Created on 2015-09-09 | Updated on 2016-06-29

이 글을 공유하기

Kakao