sass入门总结

变量 $
$width: 5em;
#main {
width: $width;
}
嵌套引用
嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：
$left: left;
.div {
border-#{$left}-width: 5px;
}
继承 @extend
.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
Mixin

使用@mixin命令，定义一个代码块
使用@include命令，调用这个mixin

@mixin left {
　　float: left;
　　margin-left: 10px;
}
div {
　　@include left;
}
参数和缺省值
@mixin left($value: 10px) {
　　float: left;
　　margin-right: $value;
}
div {
　 @include left(20px);
}
高级用法
流程控制
条件语句@if @else
@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}
循环语句
@for
@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}
@while $i
$i: 6;
@while $i > 0 {
　 .item-#{$i} { width: 2em * $i; }
　　$i: $i – 2;
}
函数
@function double($n) {
　　@return $n * 2;
}

#sidebar {
　　width: double(5px);
}