标签：
ass和CSS非常相似，但是在Sass中是没有花括号（｛｝）和分号（；）的。
在Sass中定义变量，是用“$”符号声明，然后后面跟变量名称。在这个例子中，定义变量“red”，在变量名后使用冒号（：），然后紧跟变量值：
$height:100px
而SASS中嵌套和HTML差不多：
$fontsize: 12px.speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize.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: $amounth1 @include border-radius(2px).speaker @include border-radiush1 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;} .speaker { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}@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}{
width:100px * $i;
}
}
循环得到样式，这样可以作用于轮播图之类的批量样式。。。
标签：
原文地址：http://www.cnblogs.com/rengpiaomiao/p/4658878.html
