前端的Sass高階語法

sass3.3.0中新增的功能，用來跳出選擇器巢狀的。預設所有的巢狀，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。

.parent-2 

}

.parent-2

.child

說明：預設情況下@ar-root是不能跳出@media的巢狀的，如果要跳出這些巢狀，我們需要使用@at-root (without: media)

@media only screen and (max-width:768px)  

}}}

說明：上面的**經過編譯以後，我們可以生成如下**

@media only screen and (

max-width
: 768px) }
.child2

sass定義了很多函式可供使用，當然你也可以自己定義函式，以@fuction開始

$basefontsize:      10px !default;

$gray:              #ccc !defualt; 
@function pxtorem($px) 
body
.test

說明：上面的**經過編譯以後，生成如五css**

body

.test

sass具有運算的特性，可以對數值型的value(如：數字、顏色、變數等)進行加減乘除四則運算。請注意運算子前後請留乙個空格，不然會出錯。

$basefontsize:          14px !default;

$baselineheight:        1.5 !default;
$basegap:               $basefontsize * $baselineheight !default;
$halfbasegap:           $basegap / 2  !default;
$samllfontsize:         $basefontsize - 2px  !default;

@if判斷

@if可乙個條件單獨使用，也可以和@else結合多條件使用

$type:1;

p  @else if $type == 2  @else if $type == 3  @else 
}

說明：上面的**經過編譯以後，得到的css如下

p

for迴圈有兩種形式，分別為：@for $var from through和@for $var from to。$i表示變數，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

@for $i from 1 through 3  

}

說明：上面的**經過編譯以後，得出的結果如下：

.div1

.div2
.div3

三目運算子的語法為：if($condition, $if_true, $if_false)。三個引數分別表示：條件，條件為真的值，條件為假的值。如下**所示：

$type:1;

p

說明：上面的**經過編譯以後，如下所示：

p

語法為：@each $var in。其中$var表示變數，而list和map表示list型別資料和map型別資料。sass 3.3.0新加入了多字段迴圈和map資料迴圈。

}}

說明：上面的**經過編譯以後，生成如下css

.icon-01

.icon-02
.icon-03
.icon-04

上面的@each在迴圈的時候，使用的是普通的list,我們也可以使用map健值對來進行遍歷，現在，我們就採用鍵值對的形式來完成一次遍歷，**如下：

}}

說明：上面的**經過編譯後，如下所示

.div1

.div2
.div3
.div4

@content佔位符一般情況下是指在混合器當中，我們在寫混合器內部樣式的時候，又不確定內部樣式如何去操作，這個時候，我們就會使用混合器中的佔位@content來完成，具體請見下面**:

@mixin flex-box($dir)

.div1
}

上面的**經過編譯以後，得出如下結果

.div1

sass的高階語法

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

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 ...

SASS的基本語法

了解 sass sass是 css 的預編譯語言，可以把檔案編譯成 css 檔案。sass可以定義變數 可以定義函式 可以有 if 語句 可以有 for 迴圈語句，能使你敲 的速度的變得更高更快更強。sass 檔案 和 scss 檔案的區別 在 scss 檔案裡面和寫 css 的語法基本一致 在 s...