Sass學習（四） 高階語法

條件語句

語法格式

@if

(條件)
@elseif(
)@else

not:取反

&&/and:且

or:或

條件語句

p

@else
}//編譯後
#main

for迴圈

語法格式

@for  $i from start end

}

@for $i from

1 to 10
px solid red	}}
//編譯後
.border-
1.border-
2.border-
3.border-
4.border-
5.border-
6.border-
7.border-
8.border-
9

$i:6;

@while
($i>0)
px solid red}
$i:$i -1;
}//編譯後
border-
6border-
5border-
4border-
3border-
2border-
1

each接收乙個列表

@each $num in[1

,2,3
,4,5
,6]px solid red	}}
//編譯後
border-
1border-
2border-
3border-
4border-
5border-
6

sass的高階語法

1.變數 sass允許使用變數，所有變數以 開頭 2.引用父元素 這裡 就代表是 a 3.繼承 這樣 class2 就 擁有了class1的所有屬性 4.可以重複使用的 塊 5.混入，呼叫可以重用的 塊 如果你用 mixin定義了 那麼呼叫需要使用 include 引用 6.計算 就是簡單的加減乘除...

前端的Sass高階語法

sass3.3.0中新增的功能，用來跳出選擇器巢狀的。預設所有的巢狀，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。parent 2 上面的 經過編譯以後，會生成如下 parent 2 child 說明 預設情況下 ar root是不能跳出 media的巢狀的，如果要跳出這些巢狀，我們需要...

Sass語法學習

1 編譯監控 自動監控把sass編譯成css檔案，命令列 sass watch sass basic.scss css basic.css 在監控的sass後面,可以為 sass 生成 css 樣式指定生成的格式，預設是nested型 style nested compact compressed ...