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);}