速通Sass語法：

sass的特點：

由于css的缺陷：無法自定義變量，不可引用，嵌套等。sass/scss/less等css預處理器產(chǎn)生。以sass為例，引入了變量、嵌套、運算、混入(Mixin)、繼承、顏色處理、函數(shù)等諸多功能。方便css的開發(fā)維護。

變量

使用變量

div {color: $blue;
}

插值使用變量#{$var}

$side: left;
$my-radius: 5px;
.rounded {border-#{$side}-radius: $my-radius;
}
其中 border-#{$side}-radius: $my-radius; 渲染結果為：border-left-radius: 5px;

運算

$var: 100px;
body {margin: (14px/2);top: 50px + 100px;right: $var * 10%;
}

嵌套

body{h3{top:10px;}
}

注釋

/* 塊注釋 */
// 行注釋

混入(Mixin)

@mixin bordered {border-top: dotted 1px black;border-bottom: solid 2px black;
}
#menu a {color: #111;@include bordered;
}
.post a {color: red;@include bordered;
}

函數(shù)

@function double($n) {@return $n * 2;
}
#sidebar {width: double(5px);
}

判斷邏輯

if-else

$color: red;
p {color: $color;@if $color == red {background-color: #000;} @else {background-color: #fff;}
}

for/while/each

@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}
$i: 6;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}@each $member in a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg");}
}
其中.#{$member} 是#{$member}字符串插值寫法。

繼承

.class1 {border: 1px solid #ddd;
}.class-sub {@extend .class1;font-size: 120%;
}