控制指令
Sass中可使用條件控制指令和循環(huán)控制指令。
@if指令
$type: left;
.hand {
@if $type == right {
color: red;
} @else if $type == left {
color: blue;
}@else {
color: white;
}
}
//編譯后
.hand {
color: blue; }
@for指令
@for指令有兩種形式禽最，一種是@for $var from <start> to <end>引几，另一種是@for $var from <start> through <end>。
@for $var from <start> through <end>示例
.hand {
@for $i from 1 through 3 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
}
//編譯后
.hand .border-1 {
border: 1px solid blue; }
.hand .border-2 {
border: 2px solid blue; }
.hand .border-3 {
border: 3px solid blue; }
@for $var from <start> to <end>示例
.hand {
@for $i from 1 to 3 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
}
//編譯后
.hand .border-1 {
border: 1px solid blue; }
.hand .border-2 {
border: 2px solid blue; }
從上面的兩個例子中可以發(fā)現郭厌，@for $var from <start> through <end> 包含<start>和<end>携茂，而@for $var from <start> to <end> 從<strat>開始執(zhí)行你踩，但不包含<end>的值。
@while指令
$i:3;
@while $i > 0 {
.item-#{$i} {
border-width: 2px * $i;
}
$i: $i - 1;
}
//編譯后
.item-3 {
border-width: 6px; }
.item-2 {
border-width: 4px; }
.item-1 {
border-width: 2px; }
@each指令
@each $member in logo, icon, banner {
.#{$member}-img {
background-image: url('/images/#{$member}.png');
}
}
//編譯后
.logo-img {
background-image: url("/images/logo.png"); }
.icon-img {
background-image: url("/images/icon.png"); }
.banner-img {
background-image: url("/images/banner.png"); }
函數
Sass提供了部分內置函數讳苦，也允許用戶自定義函數带膜。
內置函數
Sass中內置了有關顏色、字符串和數字等有關的函數鸳谜，以顏色函數為例膝藕。
.error {
color: lighten(#000, 10%);
background-color: darken(#fff, 10%) ;
}
//編譯后
.error {
color: #1a1a1a;
background-color: #e6e6e6; }
自定義函數
Sass中允許用戶使用@function自定義函數。
@function widther($n) {
@return $n + 2px;
}
.error {
border-width: widther(1px);
}
//編譯后
.error {
border-width: 3px; }
注釋
Sass中有兩種注釋卿堂，一種與css的標準注釋格式相同/.../（多行注釋）束莫，另一種是靜默注釋，也叫單行注釋草描，是以//開頭的览绿。
//采用鏈式繼承
/* 采用鏈式繼承-by gj*/
.error {
color: red;
}
//編譯后
/* 采用鏈式繼承-by gj*/
.error {
color: red; }
可以看出，Sass中的靜默注釋穗慕，在編譯后的css文件中是不存在的饿敲，而Sass中的多行注釋，編譯后依然存在逛绵。因此怀各，那些只是為了給自己看的注釋，需要使用靜默注釋术浪。
