Sass Output 스타일

Sass를 사용하여 css로 컴파일 하여 출력 할 때 4가지 스타일 중 하나를 선택할 수 있다.

스타일

• nested
• expanded
• compact
• compressed

아래 Sass로 네가지 스타일로 변환을 해보겠다. (확장자는 본인이 편한걸로 하면 된다.)

ul {
	font-family: Helvetica, sans-serif;
	color: #333;
	li {
		display: inline-block;
	}
}

ul 
	font-family: Helvetica, sans-serif
	color: #333
	li 
		display: inline-block

nested

컴파일의 기본 값이다. 스타일을 지정하지 않아도 nested 스타일로 적용된다. ui li 앞에 공백이 생긴다.

ul {
	font-family: Helvetica, sans-serif;
	color: #333; }
	ul li {
		display: inline-block; }

expanded

계층 구조라 하더라도 선택 앞에, 즉 ui li 앞에 공백이 없다.

ul {
	font-family: Helvetica, sans-serif;
	color: #333;
}
ul li {
	display: inline-block;
}

compact

선언이 여러 개 있더라도 줄바꿈을 하지 않는다.

ul { font-family: Helvetica, sans-serif; color: #333; }
ul li { display: inline-block; }

compressed

불필요한 공백을 제거한다.

ul{font-family:Helvetica, sans-serif;color:#333}ul li{display:inline-block}