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中有选择器嵌套和伪类嵌套，但是没有属性嵌套。