Sass编译风格

SASS提供四个编译风格
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。

* compressed:压缩后的css代码。


eg:以上篇:Sass创建简单的项目中例子,在test.scss文件编辑


Sass编译风格


默认方式:


Sass编译风格



一.嵌套输出方式 nested

命令输入:

sass --watch sassDemo\sass:sassDemo\stylesheets  --style nested


Sass编译风格


输出test.css跟默认方式是一样的.

 nested(嵌套输出方式)编译出来的CSS样式风格:最后一个大括号独占一行



二.展开输出方式 expanded

命令输入:

sass --watch sassDemo\sass:sassDemo\stylesheets  --style expanded

Sass编译风格

expanded(展开输出方式)编译出来的CSS样式风格:最后一个大括号独占一行



三.紧凑输出方式 compact

命令输入:

sass --watch sassDemo\sass:sassDemo\stylesheets  --style compact


Sass编译风格




四.压缩输出方式 compressed

命令输入:

sass --watch sassDemo\sass:sassDemo\stylesheets  --style compressed


Sass编译风格