Sass的的使用二

1、嵌套输出方式 nested

Sass 提供了一种嵌套显示 CSS 文件的方式。例如

nav {
　　ul {
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;
　　}

　　li { display: inline-block; }

　　a {
　　　　display: block;
　　　　padding: 6px 12px;
　　　　text-decoration: none;
　　}
}
在编译的时候带上参数“ --style nested”:

sass --watch test.scss:test.css --style nested
编译出来的 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;}

2、展开输出方式 expanded

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded
这个输出的 CSS 样式风格和 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;
}

3、[Sass]紧凑输出方式 compact

在编译的时候带上参数“ --style compact”:

sass --watch test.scss:test.css --style compact
该方式适合那些喜欢单行 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; }

4、[Sass]压缩输出方式 compressed

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed
压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 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}

Sass 调试：

只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数：

sass --watch --scss --sourcemap style.scss:style.css
在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以：

sass --watch style.scss:style.css
在命令终端，你将看到一个信息：

>>> Change detected to: style.scss
write style.css
write style.css.map

Sass 的变量包括三个部分：

声明变量的符号“$”
变量名称
赋予变量的值

巴特西

Sass的的使用二

最新文章

热门文章