初识sass

ass和CSS非常相似，但是在Sass中是没有花括号（｛｝）和分号（；）的。

在Sass中定义变量，是用“$”符号声明，然后后面跟变量名称。在这个例子中，定义变量“red”，在变量名后使用冒号（：），然后紧跟变量值：

$height:100px

而SASS中嵌套和HTML差不多：

$fontsize: 12px

.speaker

  .name

    font:

      weight: bold

      size: $fontsize + 10px

  .position

    font:

      size: $fontsize

而你在CSS中生成的代码却是：

 

.speaker .name {

  font-weight: bold;

  font-size: 22px;

}  

.speaker .position {

  font-size: 12px; 

}

混合（Mixins）

混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码，、给他们定义参数，可以设置默认值。和LESS差不多

这是在sass中的代码

@mixin border-radius($amount: 5px)

  -moz-border-radius: $amount

  -webkit-border-radius: $amount

  border-radius: $amount

h1

  @include border-radius(2px)

.speaker

  @include border-radius

而到了css中，代码却成了：

h1 {

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

}  

.speaker {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

函数：使用方法和JS差不多。

$baseFontSize:10px;

@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}

传参：

@mixin shadow($shadow...){
box-shadow:$shadow;
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-o-box-shadow:$shadow;
-ms-box-shadow:$shadow;
}

如果传参后面是...便可以输入任意个值。。

判断：

$type:c;
.d3{
@if $type == a{
color:red;
}
@else if $type==b{
color:blue;
}
@else{
color:green;
}
color:if($type == a,red,blue);;
}

通过$type的值的改变，来决定样式的类型。。

循环：

@for $i from 1 through 5{
.item-#{$i}{
100px * $i;
}
}

循环得到样式，这样可以作用于轮播图之类的批量样式。。。