sass学习笔记(二):sass的不同样式风格的输出方法
2016-09-07 10:47
441 查看
sass的不同样式风格的输出方法
1、嵌套式nested
Sass 提供了一种嵌套显示 CSS 文件的方式。例如
5、Sass 的调试
在 Sass3.3 版本之上
>>> Change detected to: style.scss
write style.css
write style.css.map
这时你就可以像下面展示的 gif 图一样,调试你的 Sass 代码。
![](http://s3.51cto.com/wyfs02/M02/86/F2/wKiom1fPf2mjHbXcAAev3XNa9-s881.jpg)
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
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }在编译的时候带上参数“ --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、紧凑输出方式 compact
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }在编译的时候带上参数“ --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
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }在编译的时候带上参数“ --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}一段时间之后,你实际上就不再需要写 CSS 代码了,只用写 Sass 代码。在这种情况下,你只需要设定输出格式为压缩格式,知道输出的 CSS 代码可以直接使用即可。
5、Sass 的调试
在 Sass3.3 版本之上
sass --watch style.scss:style.css在命令终端,你将看到一个信息:
>>> Change detected to: style.scss
write style.css
write style.css.map
这时你就可以像下面展示的 gif 图一样,调试你的 Sass 代码。
![](http://s3.51cto.com/wyfs02/M02/86/F2/wKiom1fPf2mjHbXcAAev3XNa9-s881.jpg)
相关文章推荐
- gulp-sass设置不同样式风格的输出方法
- sass学习笔记-输出方法
- ExtJS学习笔记 layout的9种样式风格总结
- SharePoint【学习笔记】-- SharePoint 2010 利用JavaScript根据用户使用的语言应用不同的样式
- Sass学习之路(4)——不同样式风格的输出方式
- NetworkX学习笔记-3-Python中输出Gephi文件格式的方法
- Unity Shader 学习笔记(27)渲染轮廓线(描边)方法、卡通风格渲染、素描风格渲染
- 学习笔记: Struts2中使用validate框架对Action的不同方法进行验证
- Sass学习之路(4)——不同样式风格的输出方式
- ExtJS学习笔记 layout的9种样式风格总结
- compass tables 表格 表格常见样式[Sass和compass学习笔记]
- NetworkX学习笔记-4-NetworkX输出Gephi文件的方法
- Sass 编译与不同风格的输出方式
- C# WinForm (笨方法)根据不同的样式配置 设置窗体相关控件的背景 以改变窗体风格
- ExtJS学习笔记 layout的9种样式风格总结
- ExtJS学习笔记 layout的9种样式风格总结(转)
- cocos2d-x-3.1 vs 输出Log的几种方法 (coco2d-x 学习笔记三)
- C# WinForm (笨方法)根据不同的样式配置 设置窗体相关控件的背景 以改变窗体风格
- ext4 学习笔记(十二)[样式操作系方法](白鹤翔第一季)
- [学习笔记]通过open函数改变标准输出的方法