b）默认变量：仅需在值后面加上！default
$baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; }c）特殊变量：定义的变量是属性值。但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。 $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; }d）多值变量：list或map类型。list
//sass style //------------------------------- $linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值 a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); } } //css style //------------------------------- a{ color:#08c; } a:hover{ color:#333; }map //sass style //------------------------------- $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } } //css style //------------------------------- h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }4. 嵌套
1）选择器的嵌套：一个选择器集成另一个选择器
2）属性嵌套：当属性有相同的开始单词时，嵌套。
5.混合
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
//sass style //------------------------------- @mixin center-block { margin-left:auto; margin-right:auto; } .demo{ @include center-block; } //css style //------------------------------- .demo{ margin-left:auto; margin-right:auto; }mixin也可以带有参数值。 //sass style //------------------------------- @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); } //css style //------------------------------- .opacity{ @include opacity; //参数使用默认值 } .opacity-80{ @include opacity(80); //传递参数 }@content用来解决@media的问题 //sass style //------------------------------- @mixin max-screen($res){ @media only screen and ( max-width: $res ) { @content; } } @include max-screen(480px) { body { color: red } } //css style //------------------------------- @media only screen and (max-width: 480px) { body { color: red } }6. 继承：@extend，一个选择器可以继承另一个的样式，而且有不相同的样式时，可以对样式进行重写。
//sass style //------------------------------- h1{ border: 4px solid #ff9aa9; } .speaker{ @extend h1; border-width: 2px; } //css style //------------------------------- h1,.speaker{ border: 4px solid #ff9aa9; } .speaker{ border-width: 2px; }7.占位选择器。避免冗余，对基础样式的处理，在基础验前加上%，通过extend调用。
//sass style //------------------------------- %ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; } #header{ h1{ @extend %ir; width:300px; } }
8. 函数：通过@function定义函数。
@function pxToRem($px) { @return $px / $baseFontSize * 1rem; } 9. sass可以进行运算，运算符前后有空格，否则会报错。
10.条件判断及循环：
1）@if，@else。
2）三目判断：if($condition, $if_true, $if_false)
3）for循环：@for $var from <start> through <end>和@for $var from <start> to <end>。这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
//sass style //------------------------------- @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css style //------------------------------- .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } 4）@each：@each $var in <list or map> //sass style //------------------------------- $animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }代码参考：https://github.com/YZlingyu/teambition/blob/master/css/index.scss
