常用基本语法

1.变量

变量是Sass中最基本的语法。凡是css属性的标准值（比如说1px或者bold）可存在的地方，都可以替换为变量。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
通过 $ 符号来定义，通过变量名称实现多处重复引用。

$box-color: red;        //定义变量ul{
    color: $box-color;      //引用}li{
    background-color: $box-color;       //引用}//编译后ul {
  color: red;}li {
  background-color: red;}

另外，变量的值也可以引用其他变量：

$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected {
  border: $highlight-border;}//编译后.selected {
  border: 1px solid #F90;}

2.嵌套

Sass支持选择器及属性嵌套，可以避免代码的重复书写。

2.1选择器嵌套

div {
    h1 {
        color: #333;
    }
    p {
        margin-bottom: 1.4px;
        a {
            color: #999;
        }
    }}

 /* 编译后 */div h1 { color: #333; }div p { margin-bottom: 1.4px; }div p a { color: #999; }

大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符。

div {
    p {
        margin-bottom: 1.4px;
        &:hover {
            color: #999;
        }
    }}//编译后：div p { margin-bottom: 1.4px; }div p:hover { color: #999; }

2.2属性嵌套

示例1：

div {
    border: {
      style: solid;
      width: 1px;
      color: #ccc;
    }}//编译后div {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;}

示例2：

div {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }}//编译后div {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;}

3.代码重用之继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。
使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

.class1 {
    border: 1px solid #333;}.class2 {
    @extend .class1;
    background-color: #999;}//编译后.class1, .class2 {
  border: 1px solid #333;}.class2 {
  background-color: #999;}

如上示例，.class2不仅会继承.class1自身的所有样式，也会继承任何跟.class1有关的组合选择器样式，如下：

.class1 {
    border: 1px solid #333;}.class1 a {
    color: red;}.class2 {
    @extend .class1;}//编译后：.class1, .class2 {
  border: 1px solid #333;}.class1 a, .class2 a {
  color: red;}

4.代码重用之Mixin混合器

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include+minxin名称来调用。

无参数mixin声明及调用：

@mixin mixName {        
    float: left;
    margin-left: 10px;}div {
    @include mixName;}//编译后：div {
  float: left;
  margin-left: 10px;}

带参数mixin声明及调用
可以不给参数值直接写参数，如果给了值的话，就是参数的默认值，在调用的时候传入其他值就会把默认值覆盖掉。

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;}div {
    @include left(66px);}//编译后：div {
  float: left;
  margin-left: 66px;}

带多组数值参数的mixin声明及调用
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

@mixin mixName($shadow...) {
  box-shadow:$shadow;}.box{
  @include mixName(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}//编译后：.box {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);}

下面是一个实际应用中关于CSS3浏览器兼容的mixin使用示例：

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;}@mixin opacity($opacity) {
    opacity: $opacity;
    filter: alpha(opacity = $opacity * 100);}div {
    width: 100px; height: 100px;
    @include transition(all 0.5s);
    @include opacity(0.5);}ul {
    width: 50px; height: 50px;
    @include transition(all 1s);
    @include opacity(1);    }//编译后div {
  width: 100px;
  height: 100px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0.5;
  filter: alpha(opacity=50);}ul {
  width: 50px;
  height: 50px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  filter: alpha(opacity=100);}

5.颜色函数

Sass中集成了大量的颜色函数，让变换颜色更加简单直接。

$box-color: red;        ul {
    color: $box-color;      }li {
    background-color: darken($box-color,30%);       }//编译后：ul {
  color: red;}li {
  background-color: #660000;}