10天精通Sass 之 Sass基本语法

声明变量：

$width: 200px;

sass声明变量以”$”开头

普通变量

$fontSize: 12px;
body{ font-size: $fontSize; }

默认变量
sass的默认变量仅需要在值后面加上!default即可。

$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; }

编译后的css代码:

body{ line-height:1.5 }

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖，覆盖的方式也很简单，只需要再重新声明下变量即可。

$baseLineHeight: 1.5 !default;
div{ line-height: $baseLineHeight; }
$baseLineHeight: 2;
body{ line-height: $baseLineHeight; }

编译后的css代码：

div { line-height: 2; }

body { line-height: 2; }

变量的调用

定义变量

$brand-primary: darken(#428bca, 6.5%) !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;

调用变量：

.btn-primary{
    background-color: $btn-primary-bg;
    color: $btn-primary-color;
    border: 1px solid $btn-primary-border;
}

编译出来的CSS：

.btn-primary { background-color: #337ab7; color: #fff; border: 1px solid #2e6da4; }

全局变量和局部变量

//SCSS
$color: red !default;//定义全局变量
p {
  color: $color;//调用全局变量
}
div {
  $color: green;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

编译出来的CSS：

p { color: red; }

div a { color: green; }

span { color: red; }

全局变量定义在元素外面，定义在元素内部的变量是一个局部变量，这一点类似于javascript.调用变量时，优先选择离作用域最近的变量。只有不存在局部变量时，才会继续向上查找。

什么时候需要声明变量
1、该值至少出现了2次。
2、该值至少会被更新一次。

嵌套——选择器嵌套

sass嵌套分为三种：
- 选择器嵌套
- 属性嵌套
- 伪类嵌套

选择器嵌套

p{
    span{
        color: red;
        div &{
            color: green;
        }
    }
}

&表示最近的父选择器,即p span.

编译出来的css:

p span { color: red; }
div p span { color: green; }

嵌套——属性嵌套

CSS有一些属性前缀相同，只是后缀不一样，如:border-top、border-right、margin-top、margin-bottom等等。

div{ margin:{ left: 2px solid pink; bottom: 3px solid blue; }
}

编译出来的CSS：

div { margin-left: 2px solid pink; margin-bottom: 3px solid blue; }

嵌套——伪类嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
    }
    &:after {
        clear:both;
        overflow: hidden;
   }
}

编译后的CSS：

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; overflow: hidden; }

选择器嵌套层数太多将影响代码阅读，因此建议选择器的嵌套层数尽量不要超过三层。
LESS中有选择器嵌套和伪类嵌套，但是没有属性嵌套。