:nested

중첩 스타일은 Sass의 기본 출력 스타일로, CSS 스타일과 HTML 문서의 구조를 잘 보여줍니다. 각 속성은 한 줄에 작성하고, 각 규칙은 중첩 정도에 따라들여쓰기합니다.

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded

확장 스타일은사람이 작성한 CSS 스타일과 거의 같다고 할 수 있습니다. 속성은 규칙 안에서 들여쓰기하여 각 한 줄에 작성하고, 규칙은 들여쓰기하지 않습니다.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

축약 스타일은 중첩 스타일이나 확장 스타일보다 공간을 덜 차지합니다. 각 CSS 규칙을 단 한 줄에 표시하며 속한 모든 속성도 같은 줄에 작성합니다.1줄마다 선택자가 앞에 있어서 속성보다선택자에 더욱 집중하게 합니다.

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

압축 스타일은 최소한의 공간을 차지하도록 압축한 형태로, 사람이 읽는 상황을 고려하지 않습니다. 선택자를 구분하는 공백처럼 꼭 필요한 공백이나, 파일 끝에 하나의 새 줄 밖의 공백은 모두 삭제합니다.

색상 값을최소 표현으로 변경합니다.

여러 줄 주석도 모두 삭제하지만 주석 첫 글자에 !가 있으면 삭제하지 않습니다.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

출력방식 지정

커맨드라인에서 설정

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