@if 指令是乙個 sassscript，它可以根據條件來處理樣式塊，如果條件為 true 返回乙個樣式塊，反之 false 返回另乙個樣式塊。在 sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。
@mixin blockorhidden($boolean:true) ";display: block;
}@else ";
display: none;
}}.block
.hidden
編譯出來的css:
.block.hidden
在 sass 的 @for 迴圈中有兩種方式：
@for $i from through @for $i from to
$i 表示變數
start 表示起始值
end 表示結束值
這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。
//scss **：@for $i from 1 through 3
}//編譯出來的css:
.item-1
.item-2
.item-3
@for應用在網格系統生成各個格仔 class 的**：
//scss$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid
@for $i from 1 through 12 #
}
編譯出來的 css:
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12.span1
.span2
.span3
.span4
.span5
.span6
.span7
.span8
.span9
.span10
.span11
.span12
@while 指令也需要 sassscript 表示式（像其他指令一樣），並且會生成不同的樣式塊，直到表示式值為 false 時停止迴圈。這個和 @for 指令很相似，只要 @while 後面的條件為 true 就會執行。
這裡有乙個 @while 指令的簡單用例：
//scss$types: 4;
$type-width: 20px;
@while $types > 0
$types: $types - 1;
}//編譯出來的 css
.while-4
.while-3
.while-2
.while-1
@each 迴圈就是去遍歷乙個列表，然後從列表中取出對應的值。
@each 迴圈指令的形式：
@each $var in
@each 指令的簡單示例：
//scss$list: adam john wynn mason kuroir;//$list 就是乙個列表
@mixin author-images .png") no-repeat;}}
}.author-bio
//編譯出 css:
.author-bio .photo-adam
.author-bio .photo-john
.author-bio .photo-wynn
.author-bio .photo-mason
.author-bio .photo-kuroir
sass的高階語法
1.變數 sass允許使用變數，所有變數以 開頭 2.引用父元素 這裡 就代表是 a 3.繼承 這樣 class2 就 擁有了class1的所有屬性 4.可以重複使用的 塊 5.混入，呼叫可以重用的 塊 如果你用 mixin定義了 那麼呼叫需要使用 include 引用 6.計算 就是簡單的加減乘除...
sass高階 變數運算
變數操作 兩個變數之間的運算子需要用空格隔開，否則會報錯。width1 50px width2 100px body 連字符號中間使用帶空格的加號效果不變 a hover 注意 說明運算時sass只關注運算子前後兩個用空格隔開的值，其餘的都不管原樣輸出 層級關係 雙引號權重最大，沒有引號其次，單引號...
sass用法總結
一 sass安裝 1 移除原有的ruby源位址 gem sources remove 2 新增可用的ruby源位址 gem sources a 3 安裝sass gem install sass 4 sublime支援scss檔案高亮顯示 借助package control安裝sass外掛程式，之後...