sass學習——SassScript

文章目錄

• 1.SassScript變數聲明
• 2.變數調用
• 3.SassScript資料類型
• 4.SassScript運算子
• 5.插值語句：#{ }
• 6. 變數定義 !default

1.SassScript變數聲明

——SassScript的變數以“$”開頭：

$width: 5em;

2.變數調用

——嵌套規則內的變數只能在規則內使用，嵌套規則外的變數可被其他規則調用

#main {width: $width;}

3.SassScript資料類型

——SassScript 支援六種不同的資料類型，有數字（包括有單位，如px的和無單位的），字串（雙引號，單引號，無引號），顏色，空值，布爾型（null），值列表（用空格或逗號分開）；同時SassScript也支援css屬性，並將他們視為無引號字串(unquoted strings)

字串：SassScript在編譯css檔案時不會改變其類型，除了使用插值語句#{ }，將有符號字串編譯為無符號字串；

——字串間可通過“+”來串連，有引號字串（+ 左側）連結無引號字串，運算結果有引號的，無引號字串（+ 左側）連結有引號字串，運算結果則沒引號。

——在文本字串中 #{ } 插值語句可以被用來添加動態值：content: "I ate #{5 + 10} pies!"; ==> content: "I ate 15 pies!"; 空的值被視作插入了Null 字元串;

布爾型：SassScript 支援布爾型的 and or 以及 not 運算。

值列表：是指 Sass 如何處理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 這樣通過空格或者逗號分隔的一系列的值。

——獨立的值也被視為值列表——只包含一個值的值列表。

——值列表中可以包含值列表，若使用同樣的分隔方式要用括弧分隔開

——如果值列表中包含空的值列表或空值，編譯時間將清除空值，比如 1px 2px () 3px 或 1px 2px null 3px

——不支援任何運算方式，只能用function控制

nth function 可以直接存取值列表中的某一項

join function 可以將多個值列表連結在一起

append function 可以在值列表中添加值

@each rule 則能夠給值列表中的每個項目添加樣式

顏色：SassScript中顏色可進行運算，顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值：

——數字與顏色值之間也可以進行算數運算，分成3個兩位分別與數字進行運算

——顏色值包含 alpha channel（rgba 或 hsla 兩種顏色值），必須擁有相等的 alpha 值才能進行運算，因為算術運算不會作用於 alpha 值。

4.SassScript運算子

相等運算子 == 或 !=，所有資料類型都支援；

數字運算子 (Number Operations)：加減乘除、取整等運算 (+, -, *, /, %)，可在不同單位間轉換

——SassScript中的"/"有分割資料和除法的功能，預設是分隔資料，視為除法的三種情況：

1.值或值的一部分是變數；$width/2;

——若需要使用變數又不要做除法運算可用#{ }包裹變數，即#{$font-size}/#{$line-height};

2.值被括弧包裹；(500px/2); 

3.值是算術運算式的一部分；5px + 8px/2px

布爾運算 (Boolean Operations)符： and or 以及 not ；

關係運算子 <, >, <=, >=；

括弧：影響運算順序；

5.插值語句：#{ }

通過 #{ } 插值語句可以在選取器或屬性名稱中使用變數;

使用 #{ } 可以避免 Sass 運行運算運算式，直接編譯 CSS;

$font-size:12px;$font-height:30px;$name:foo;$attr:font;p .#{$name}{};#{$attr}-size:12px;font:#{$font-size}/#{$font-height};

6. 變數定義 !default

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

!default添加在變數的結尾，如果該變數還未賦值，這將該值賦值給這個變數，若變數已被賦值，則變數的值為原來的值

$content: null;
$content: "Non-null content" !default;

若變數為空白值null時，將被 !default定義的變數賦值