sass的高階語法

2022-01-28 16:56:57 字數 1173 閱讀 7416

1. 變數

sass允許使用變數,所有變數以$開頭

2.引用父元素 & 

這裡 "&" 就代表是 a

3.繼承

這樣  class2 就 擁有了class1的所有屬性

4.可以重複使用的**塊

5.混入,呼叫可以重用的**塊

如果你用  @mixin定義了

那麼呼叫需要使用 @include 引用

6.計算

就是簡單的加減乘除

7.迴圈和判斷

迴圈語句 :

@for   $i  from  …  to  … 

eg:from 1 to 5  —— 相當於是 1  <=  $i  < 5

不包括5本身

用到 $i 這個引數時需要用到拼接

拼接的規則是  #

判斷語句

8.檔案合併

語法 @import " scss檔名 "; 

這樣合併的scss檔案在 css檔案中會被合併

注意:合併的檔案有先後順序。

前端的Sass高階語法

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

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