sass技术

变量

SASS允许使用变量，所有变量以$开头。

$blue : #1875e7;　
div {
　color : $blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
.rounded {
　　border-#{$side}-radius: 5px;
}

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

SASS允许选择器嵌套

.car .bwm {
　　　　color : red;
}
可以写成：

.car  {
     .bwm{
           color : red;
     }
}
属性也可以嵌套，如下：

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
　　&:hover { color: #ffb3ff; }
}

 Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

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

有参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

 条件判断

@if判断
@if可一个条件单独使用，也可以和@else结合多条件使用

三目判断
语法为：if(condition,if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

5.3 循环语句

for循环
for循环有两种形式，分别为：@for varfrom<start>through<end>和@forvar from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。