簡單繼承:
@extend 繼承

編譯后

關聯屬性繼承:

編譯后

鏈式繼承:

編譯后

偽類繼承:

編譯后

sass嵌套

編譯后

相同的屬性值前綴,也可以用嵌套

編譯后

sass條件控制
@if @else if @else

編譯后

條件判斷陳述句也可以寫在外面

編譯后

回圈
@for $i from n1 through n2 (包括n2)
@for $i from n1 to n2(不包括n2)

編譯后


編譯后

使用for回圈遍歷陣列list
length(list) 獲取陣列長度

編譯后

while回圈

用的官方demo,編譯居然報錯了

好吧,原因是是$i: $i - 2 ,這個減號兩邊必須留空格!!!
改變了我多年的編碼風格,真難受……

修改后:

編譯后

使用each遍歷map

編譯后


轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/55551.html
標籤:Html/Css
