Sass 提供四个编译风格的选项
-nested：嵌套缩进的css代码，它是默认值
- expanded：没有缩进的、扩展的css代码
- compact：简洁格式的css代码
- compressed：压缩后的css代码
生产环境当中，一般使用最后一个选项 ：
Sass --style compressed test.sass test.css
test 是文件名，还可以指定路径
sass --help 查看帮助
sass [options] [INPUT] [OUTPUT]
基本用法
变量
- Sass允许使用变量，所有变量以
$开头
比如 ：$highlight-color: #F90; - 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
计算功能
- Sass允许在代码中使用算式
嵌套
- Sass 允许选择器嵌套
比如
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
可以写作：
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
- 属性也可以嵌套
嵌套属性的规则是：把属性名从中划线 - 的地方断开，在根属性后边添加一个冒号 : ，紧跟一个{ }块，把子属性部分写在这个{ }块中。
比如：
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
等价于
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
父选择器的标识符&
类似于：hover的伪类不能嵌套，这时就可以使用父选择器 & ，它可以放在任何一个选择器可出现的地方。
article a {
color: blue;
&:hover { color: red }
}
上面的代码等价于
article a { color: blue }
article a:hover { color: red }
注释
Sass 共有两种注释风格：
标准的CSS注释 /* comment */
会保留到编译后的文件静默注释 // comment
只保留在Sass 源文件中，编译后被省略
代码的重复使用
继承
选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。
eg.
//通过选择器继承继承样式
.error { // 如果.error中有组合选择器，则组合选择器样式也会被 .seriousError 以组合选择器的形式继承
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
混合器 Mixin
混合器使用@mixin标识符定义，定义一个可以重用的代码块，可以指定参数和缺省值。
使用@mixin命令，定义一个代码块；
使用@include命令，调用这个mixin。
eg .
@mixin rounded-corners { // 定义
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners; // 调用
}
注意：
大量的重用可能会导致生成的样式表过大，导致加载缓慢。
颜色函数
Sass 提供了一些内置的颜色函数，以便生成系列颜色。
插入文件
@import命令，用来插入外部文件。如果插入的是.css文件，则等同于css的import命令。
高级用法
条件语句
循环语句
Sass 支持for循环，while循环，each命令
@for
-
@forfrom to { ... }
不包括最后一个数字 -
@forfrom through { ... }
包括最后一个数字
来个实例感受一下：
scss 代码：
$class-prefix: col-; // 类名前缀
@for $i from 1 through 4 {
&.#{$class-prefix}#{$i} { // &表示父选择器， #{xx} 插值
width: ($i / 4) * 100%;
}
}
转译成css后：
.col.col-1[data-v-a479d8] {
width: 25%;
}
.col.col-2[data-v-a479d8] {
width: 50%;
}
.col.col-3[data-v-a479d8] {
width: 75%;
}
.col.col-4[data-v-a479d8] {
width: 100%;
}
自定义函数
Sass 允许用户编写自己的函数。
导入 Sass 文件
Sass 有一个@import规则，Sass 的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
使用Sass 的@import规则并不需要指明被导入文件的全名。
局部文件
Sass 局部文件的文件名以下划线开头，这样，Sass 就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
局部文件可以被多个不同的文件引用。
默认变量值 !default
!default 含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
嵌套导入
跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。
比如 ，有一个名为_blue-theme.scss的局部文件，内容如下：
aside {
background: blue;
color: white;
}
然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
原生的CSS导入
由于sass兼容原生的css，所以它也支持原生的CSS@import。
把原始的css文件改名为.scss后缀，即可直接导入了。