Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。

可以通过命令行的方式编译Sass：

sass input.scss output.css

还可以命令 Sass 监视文件的改动并更新 CSS ：

sass --watch input.scss:output.css

但一般就会使用gulp、webpack来编译工程中的sass。

嵌套

sass允许css规则进行嵌套：

#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } }

会被编译为：

#main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; }

这有效帮助我们避免父选择器的重复书写。

引用父选择器 &

a{ font-weight: bold; text-decoration: none; &:hover{ text-decoration: underline; } }

& 在编译时将被替换为父选择符，输出到 CSS 中。

嵌套属性

CSS有一些属性是在一个命名空间下的，如font：font-family, font-size, font-weight。sass就允许在一个命名空间下面书写sub属性，从而避免一条一条书写：

.funky{ font{ family:fantasy; size:39em; weight:bold; } }

被编译为：

.funky { font-family: fantasy; font-size: 30em; font-weight: bold; }

注释

sass支持两种注释方式：

多行： /* */ ：被编译为css的时候被保留单行：//：被编译为css的时候被去除，不会被保留 /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } // These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. a { color: green; }

被编译为：

/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } a { color: green; }

变量

变量以美元符号$开头：

$width :5em; #main{ width:$width; }

变量只在其被定义时所属嵌套选择器中可用。若变量在所有嵌套选择器的外部被定义，那么它们在任意地方都是可用的，可以理解为全局的。

变量默认值

你可以通过在值的末尾添加 !default 标记来指定变量默认值。当变量没有被赋值的情况下就会使用这个默认值：

$content: "First content"; $content: "Second content?" !default; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; }

被编译为：

#main { content: "First content"; new-content: "First time reference"; }

运算

数字运算

sass支持数字类型的标准运算：+、-、*、/、%，如果需要的话，也可以在不同单位间做转 也支持关系运算： <、>、<=、>=、 ==、!=

p { width: 1in + 8pt; }

被编译为：

p { width: 1.111in; }

括号可以改变运算顺序

p { width: (1em + 2em) * 3; }

被编译为：

p { width: 9em; }

颜色运算

所有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算：

p { color: #010203 + #040506; }

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

p { color: #050709; }

字符串运算

+运算符可以用来连接字符串

p { cursor: e + -resize; }

被编译为：

p { cursor: e-resize; }

@规则

Sass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令”。

@import

Sass扩展了css的@import规则，使其能够引入scss文件。 所有引入的scss文件都会被合并并输出一个单一的css文件。

@import根据文件名引入，默认情况下会寻找scss文件并直接引入，但是在几种情况下会被编译成css的@import规则：

文件的扩展名是 .css文件名以 http:// 开头文件名是 url()@import 包含了任何媒体查询（media queries）

css中的@import规则用于从其他样式表导入样式规则，但并不会进行合并等操作。

@import "foo.scss" @impot "foo"

两者都将引入 foo.scss 文件 可以通过一个 @import 引入多个文件:

@import "rounded-corners", "text-shadow";

如果你有一个scss文件需要引入，但是你又不希望它被编译为一个css文件，就可以在文件名前面加一个下划线就能避免被编译。

例如，你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了， 而且你引入的时候还可以省略掉前面的下划线：

@import "colors";

嵌套@import规则

虽然大部分时间只需在顶层文件使用 @import 就行了， 但是，你还可以把他们包含在 CSS 规则 和 @media 规则中。

//example.scss .example { color: red; } #main { @import "example"; }

会被编译成：

#main .example { color: red; }

@media

与css中的@media用法相同，但那是可以被嵌套在规则中。

.sidebar{ width:300px; @media screen and (orientation:landscape){ width:500px; } }

被编译为：

.sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } }

@media规则之间也可以互相嵌套，编译时会被用and连接起来：

@media screen{ .sidebar{ @media (orientation:landscape){ } } }

被编译为：

@media screen and (orientation: landscape) { .sidebar { width: 500px; } }

@extend

用于继承另一个样式。

.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }

被编译为：

.error, .seriousError { border: 1px #f00; background-color: #fdd; } .seriousError { border-width: 3px; }

这意味这error中所有的样式seriousError 也都有，同时还有一些自己独有的样式。

条件语句

@if

p{ @if 1+1 == 2 {border: 1px solid;} @if 5<3 { border: 2px dotted; } @if null { border: 3px double; } }

被编译为：

p { border: 1px solid; }

可以和多个@else if语句、一个@else语句一起使用。

$type:monster; p{ @if $type == ocean{ color: blue; }@else if $type==matador{ color: red; }@else if $type == monster{ color:green; }@else { color: black; } }

被编译为：

p { color: green; }

@for

@for指令用于重复地输出一组样式。

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }; }

被编译为：

.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

@each

用于遍历一个list

@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }

编译为：

.puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); }

@while

$i:6; @while $i>0{ .item-#{$i} { width: 2em * $i; } $i: $i - 2; }

编译为：

.item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

mixin指令

Mixins允许定义可以在整个样式表中可以重用的样式。

定义一个mixin

使用@mixin来定义一个mixin：

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }

mixin也可以包含选择器：

@mixin clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } }

包含一个mixin

使用@include来引入一个mixin：

.page-title{ @include large-text; padding: 4px; margin-top: 10px; }

被编译为：

.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

mixin也可以在任何规则外部引入：

@mixin silly-links { a { color: blue; background-color: red; } } @include silly-links;

一个mixin内部也可以引用其他mixin：

@mixin highlighted-background { background-color: #fc0; } @mixin header-text { font-size: 20px; } @mixin compound { @include highlighted-background; @include header-text; }

参数

mixin可以将sass变量作为参数。 在定义mixin时，参数是用逗号分隔的变量名，全部在mixin名字之后的括号中。使用mixin时也以同样的方式传入参数

@mixin sexy-border($color, $width){ border:{ color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue,1em); }

被编译为：

p{ border-color: blue; border-width: 1em; border-style: dashed; }

mixin可以设定参数的默认值，如果在使用的时候没有传入那个参数就使用默认值：

@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }

被编译为：

p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; }

函数指令

@function grid-width($n){ @return $n*5; } #sidebar{ width: grid-width(2); }

编译为：

#sidebar{ width: 10px; }

在函数最后必须使用return来返回结果。