给定的测试文件test.css:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
1、嵌套输出方式 nested
在编译的时候带上参数 “ --style nested”:
sass --watch test.scss:test.css --style nested
编译出来的结果:
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
2、嵌套输出方式 expanded
在编译的时候带上参数“ --style expanded”:
sass --watch test.scss:test.css --style expanded
输出:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
3、嵌套输出方式 compact
在编译的时候带上参数“ --style compact”:
sass --watch test.scss:test.css --style compact
编译输出:
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
4、压缩输出方式 compressed
在编译的时候带上参数“ --style compressed”:
sass --watch test.scss:test.css --style compressed
压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}