1.使用变量
Sass使用$符号来标识变量，比如$highlight-color。
1.1声明变量
Sass声明变量和CSS声明属性很像：
$highlight-color : #abcdef;
这意味着变量$highlight-color现在的值时#abcdef。任何可以用作CSS属性值的赋值都可以用作Sass的变量值，甚至是以空格分割的多个属性值，如$basic-border : 1px solid black;或以逗号分割的多个属性值，如$plain-font : "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica。只有当引用了变量时它才会生效。
与CSS属性不同，变量可以在CSS规则块定义之外存在。当变量定义在CSS规则块内，那么该变量只能在此规则块内使用。例如：
$nav-color: #abcdef;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
在这段代码中，变量$nav-color定义在规则块外部，因此这个样式表中的任意位置都可以引用这个变量，而$width定义在了规则块内部，因此只有在nav的规则块内部才可以引用它。也就意味着你可以在样式表的其他地方定义和引用$width不会影响到nav的规则块内部的$width变量。
1.2变量引用
凡是CSS属性的标准值(比如说1px或者bold)可存在的地方，变量就可以使用。CSS生成时，变量会被它们的值所替代，之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用到这个变量的地方生成的值都会被改变。
在声明变量时，变量值也可以引用其他变量。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：
$highlight-color : #abcdef;
$highlight-border : 1px $highlight-color solid ;
.selected {
border : $highlight-border;
}
这里，$highlight-border变量的声明中使用了$highlight-color这个变量。产生的效果就跟你直接为border属性设置了一个1px $highlight-color solid的值是一样的。
1.3变量名用中划线还是下划线分隔
Sass的变量名可以与CSS中的属性名和选择器名称相同，包括中划线和下划线。这两种方法互相兼容，用中划线声明的变量可以用下划线的方式引用，例如：
$link-color : blue;
a {
color : $link_color;
}
$link-color 和 $link_color其实指向的是同一个变量。除了变量，混合器和Sass函数的中划线命名内容和下划线命名内容也是互通的。但在Sass中纯CSS部分不通，比如类名、ID或属性名。
2.嵌套CSS规则
Sass的嵌套规则能够避免重复书写CSS选择器。假设有这么一段代码：
#content article h1 { color : #333 }
#content article p { margin-bottom : 1.4em }
#content aside { background-color : #eee }
Sass文件代码：
#content {
article {
h1 { color : #333 }
p { margin-bottom : 1.4em }
}
aside { background-color : #eee }
}
上边的例子，Sass会在输出CSS时把它转换成跟你之前看到的一样的效果。在这个过程中，Sass用了两步：首先，把#content（父级）这个ID放到article（子级）选择器和aside（子级）选择器的前边：
#content article {
h1 { color : #333 }
p { margin-bottom : 1.4em }
}
#content aside { background-color : #eee }
然后，#content article里面还有嵌套的规则，Sass重复一遍上边的步骤，把新的选择器添加到内嵌的选择器前边：
#content article h1 { color : #333 }
#content article p { margin-bottom : 1.4em }
#content aside { background-color : #eee }
一个给定的规则块，既可以像普通的CSS那样包含属性，又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时，这种能力就非常有用：