1、变量$
$width:5em;
#main{
width:$width;
}
2、数据类型
SassScript支持的6种主要的数据类型：
- 数字，1，2，3，10px
- 字符串,"foo",'bar'
- 颜色,blue,#04a3f9
- 布尔型，true,false
- 空值，null
- 数组（list），用空格或逗号做分隔符,1.5em 1em 0 2em,Helvetica,Arial
- maps,(key1:value1，key2:value2)
3、运算
3.1、数字运算
支持加减乘除、取整等运算(+,-,*,/,%)，如果必要会在不同单位间转换值
p{
width:lin+8pt;
}
3.2、颜色值运算
颜色值的运算是分段计算进行的，也就是分别计算红色、绿色，以及蓝色的值
p{
color:#010203+#040506
}
计算01+04=05,02+05=07,03+06=09然后编译为
p{
color:#050709
}
p {
color: #010203 * 2;
}
计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
p {
color: #020406;
}
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译成
p {
color: rgba(255, 255, 0, 0.75);
}
3.3、字符串运算
p {
cursor: e + -resize;
}
编译为
p {
cursor: e-resize;
}
3.4、布尔运算
4、园括号
圆括号可以用来影响运算的顺序：
p {
width: 1em + (2em * 3);
}
编译为
p {
width: 7em;
}
5、函数
p {
color: hsl(0, 100%, 50%);
}
编译为
p {
color: #ff0000;
}
6、插值语句#{}
通过#{}插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为
p.foo {
border-color: blue; }
#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为
p {
font: 12px/30px; }
7、&
就像当它在 sass 脚本中的选择器中使用时引用当前父选择器时，它是一个逗号分隔的空格分隔列表的列表，例如
.foo.bar .baz.bang, .bip.qux {
$selector: &;
}
选择器的值现在是 foo bar baz bang bip qux 复合选择器在这里被引用以表明它们是字符串，但实际上即使父选择器不包含逗号或空格，它们也不会被引用，因此总是有两层嵌套，因此它可以一致地访问
如果没有父选择器，则值将为 null 这意味着您可以在 mixin 中使用它来检测父选择器是否存在 选择器的值现在是 foo bar baz bang bip qux 复合选择器在这里被引用以表明它们是字符串，但实际上即使父选择器不包含逗号或空格，它们也不会被引用，它们将始终具有两层嵌套，因此可以一致地访问它
如果没有父选择器，则值将为 null，这意味着您可以在 mixin 中使用它来检测父选择器是否存在
@mixin does-parent-exist {
@if & {
&:hover {
color: red;
}
} @else {
a {
color: red;
}
}
}
8、变量定义 !default
可以在变量的结尾添加!default给一个未通过!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"; }
变量是 null 空值时将视为未被 !default 赋值。
$content: null;
$content: "Non-null content" !default;
#main {
content: $content;
}
编译为
#main {
content: "Non-null content"; }
9、@-Rules与指令
9.1 @import
Sass拓展了@import的功能，允许其导入Scss或Sass文件，被导入的文件将合并编译到同一个css文件中，另外，被导入的文件中所包含的变量或者混合指令（mixin）都可以在导入的文件中使用。
通常，@import寻找Sass文件并将其导入，但以下情况下，@import仅作为普通的css语句，不会导入任何Sass文件
-
文件拓展名是.css
-
文件名以http://开头
-
文件名是url()
-
@import包含media queries
如果不在上述情况内，文件的拓展名是.scss或sass，则导入成功。没有指定拓展名，Sass将会试着寻找文件名相同，拓展名为.scss或sass的文件并将其导入
@import "foo.scss" 或 @import "foo"
大多数情况下，一般在文件的最外层使用@import，其实，也可以将@import嵌套在css样式或者@media中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。
.example{
color:red;
}
然后导入到main样式内
#main{
@import "example"
}
被编译成
#main 。example{
color:red
}
不可以在混合指令(mixin)或控制指令中嵌套@import
9.2 @media
sass中@media指令和css中的用法一样，只是增加了一点额外的功能：允许其在css规则中嵌套。如果@media嵌套在css规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器，这个功能让@media用起来更方便，不需要重复使用选择器，也不会打乱css的书写流程。
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译为
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
@media` 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 `and
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
编译为
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}
编译为
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sidebar {
width: 500px; } }
9.3 @extend
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：
<div class="error seriousError">
Oh no! You've been hacked!
</div>
样式如下
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
麻烦的是，这样做必须时刻记住使用 .seriousError 时需要参考 .error 的样式，带来了很多不变：智能比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
9.3.1 延伸复杂的选择器
Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^="http://"] 等，例如：
.hoverlink {
@extend a:hover;
}
同 class 元素一样，a:hover 的样式将继承给 .hoverlink。
.hoverlink {
@extend a:hover;
}
a:hover {
text-decoration: underline;
}
编译为
a:hover, .hoverlink {
text-decoration: underline; }
与上面 .error.intrusion 的例子一样，所有 a:hover 的样式将继承给 .hoverlink，包括其他使用到 a:hover 的样式，例如：
.hoverlink {
@extend a:hover;
}
.comment a.user:hover {
font-weight: bold;
}
编译为
.comment a.user:hover, .comment .user.hoverlink {
font-weight: bold; }
9.3.2 多重延伸
同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：
.error {
border: 1px #f00;
background-color: #fdd;
}
.attention {
font-size: 3em;
background-color: #ff0;
}
.seriousError {
@extend .error;
@extend .attention;
border-width: 3px;
}
编译为
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.attention, .seriousError {
font-size: 3em;
background-color: #ff0; }
.seriousError {
border-width: 3px; }
每个 .seriousError 将包含 .error 与 .attention 下的所有样式，这时，后定义的样式享有优先权：.seriousError 的背景颜色是 #ff0 而不是 #fdd，因为 .attention 在 .error 之后定义。
多重延伸可以使用逗号分隔选择器名，比如 @extend .error, .attention; 与 @extend .error; @extend.attention 有相同的效果。
9.3.3 继续延伸
当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个，例如：
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.criticalError {
@extend .seriousError;
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
现在，每个 .seriousError 选择器将包含 .error 的样式，而 .criticalError 不仅包含 .seriousError 的样式也会同时包含 .error 的所有样式，上面的代码编译为：
.error, .seriousError, .criticalError {
border: 1px #f00;
background-color: #fdd; }
.seriousError, .criticalError {
border-width: 3px; }
.criticalError {
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%; }
9.3.4 选择器列
暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列：
#fake-links .link {
@extend a;
}
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
编译为
a, #fake-links .link {
color: blue; }
a:hover, #fake-links .link:hover {
text-decoration: underline; }
9.3.5 @extend-Only 选择器
有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。
如果使用普通的 CSS 规则，最后会编译出很多用不到的样式，也容易与其他样式名冲突，所以，Sass 引入了“占位符选择器” ，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。
.notice {
@extend %extreme;
}
编译为
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
9.3.6 !optional 声明
如果 @extend 失败会收到错误提示，比如，这样写 a.important {@extend .notice}，当没有 .notice 选择器时，将会报错，只有 h1.notice 包含 .notice 时也会报错，因为 h1 与 a 冲突，会生成新的选择器。
如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的，例如：
a.important {
@extend .notice !optional;
}
9.4 @at-root
@at-root指令会导致在文档的根部发出一个或多个规则，而不是嵌套在其父选择器之下，它可以与单个内联选择器一起使用
.parent {
...
@at-root .child { ... }
}
编译为：
.parent { ... }
.child { ... }
或者它可以与包含多个选择器的块一起使用
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
编译为：
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
默认情况下，@at-root 处仅排除选择器，但是也可以使用@at- root 来移出嵌套指令（例如@media）
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}
编译为:
@media print {
.page {
width: 8in;
}
}
.page {
color: red;
}
您可以使用@at-root（without：...）移出任何指令。 您还可以使用由空格分隔的多个指令来执行此操作：@at-root（without：media supports）移动到 @media 和 @supports 查询之外。
可以将两个特殊值传递给@at-root。 “rule”指的是普通的CSS规则； @at-root（without：rule）与不带查询的@at-root 相同。 @at-root (without: all) 意味着样式应该移到所有指令和 CSS 规则之外。 如果您想指定要包含哪些指令或规则，而不是列出应排除哪些指令或规则，则可以使用 with 而不是 without。 例如，@at-root（with：rule）将移至所有指令之外，但将保留所有 CSS 规则。
9.5 @debug
@debug 指令将 SassScript 表达式的值打印到标准错误输出流。 它对于调试具有复杂 SassScript 的 Sass 文件非常有用。 例如：
@debug 10em + 12em;
编译为
Line 1 DEBUG: 22em
9.6 @warn
@warn 指令将 SassScript 表达式的值打印到标准错误输出流。 对于需要警告用户弃用或从轻微 mixin 使用错误中恢复的库来说，它非常有用。 @warn 和 @debug 之间有两个主要区别：
-
可以使用 --quiet 命令行选项或 :quiet Sass 选项关闭警告。
-
样式表跟踪将与消息一起打印出来，以便被警告的用户可以看到他们的样式在哪里引起了警告。
@mixin adjust-location($x, $y) { @if unitless($x) { @warn "Assuming #{$x} to be in pixels"; $x: 1px * $x; } @if unitless($y) { @warn "Assuming #{$y} to be in pixels"; $y: 1px * $y; } position: relative; left: $x; top: $y; }
@error
@error 指令将 SassScript 表达式的值作为致命错误抛出，包括一个很好的堆栈跟踪。 它对于验证 mixins 和函数的参数很有用。
例如：
@mixin adjust-location($x, $y) {
@if unitless($x) {
@error "$x may not be unitless, was #{$x}.";
}
@if unitless($y) {
@error "$y may not be unitless, was #{$y}.";
}
position: relative; left: $x; top: $y;
}
10、控制指令
SassScript提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用，主要与混合指令（mixin）配合使用，尤其是用在Compass等样式库中。
10.1 if
内置 if() 函数允许您根据条件进行分支并仅返回两种可能结果之一。 它可以在任何脚本上下文中使用。 if 函数仅评估与其返回的参数相对应的参数 - 这允许您引用可能未定义的变量或进行可能导致错误的计算（例如除以零）。
10.2 @if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译为
p {
border: 1px solid; }
@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @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; }
10.3 @for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
10.4 @each
@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。
@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：
@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'); }
@each 指令还可以使用多个变量，如 中的 @each var2, ... 中的那样。 如果 是列表的列表，则子列表的每个元素都分配给相应的变量。 例如：
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
编译成:
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default; }
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer; }
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move; }
由于映射被视为成对的列表，因此多重分配也适用于它们。 例如：
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
编译成:
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
10.5 @while
@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：
$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; }
11、混合指令
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
11.1 定义混合指令@mixin
混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
11.2 引用混合样式@include
使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：
.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 silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
编译为
a {
color: blue;
background-color: red; }
混合样式中也可以包含其他混合样式，比如
@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。
11.3 向混合样式中导入内容
在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方：
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
编译为
* html #logo {
background-image: url(/logo.gif);
}
为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，所以上面的例子可以写成：
=apply-to-ie6-only
* html
@content
+apply-to-ie6-only
#logo
background-image: url(/logo.gif)
注意： 当 @content 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。
传递给 mixin 的内容块在定义该块的范围内进行评估，而不是在 mixin 的范围内。 这意味着 mixin 的本地变量不能在传递的样式块中使用，并且变量将解析为全局值：
12、函数指令
Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
编译为
#sidebar {
width: 240px; }
与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。
自定义的函数也可以使用关键词参数，上面的例子还可以这样写：
#sidebar { width: grid-width($n: 5); }
建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。
自定义函数与 mixin 相同，都支持 variable arguments
13、输出格式
13.1 :nested
Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
13.2 :expanded
Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
13.3 :compact
Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
13.4 :compressed
Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
