這篇文章主要介紹了CSS的Sass框架中常用的操作符的使用教程,整理了一些基本的邏輯操作符和字符串操作符等的翻譯和用法,需要的朋友可以參考下
賦值操作符
Sass 使用冒號( : )來定義一個變量:
CSS Code復制內容到剪貼板
- $main-color: lightgray;
算術操作符
算術操作符用於執行數學計算,下面是 Sass 所支持的算術操作符:
操作符 |
簡介 |
+
加
-
減
*
乘
/
除
%
取余
注意,上面的操作符只能用於單位相同的數值運算:
CSS Code復制內容到剪貼板
- h2 {
- font-size: 5px + 2em; // 單位不一致,編譯報錯
- font-size: 5px + 2; // 7px
- }
此外,兩個單位相同的數值相乘無法生成有效的 CSS:
CSS Code復制內容到剪貼板
- h2 {
- font-size: 5px * 2px; // invalid CSS
- }
如你所知,/ 操作符本身就是 CSS 簡寫語法的一部分,比如:
CSS Code復制內容到剪貼板
- font: 16px / 24px Arial sans-serif;
- background: url("http://example.com") no-repeat fixed center / cover;
但是,Sass 重載了該運算符,用於執行除法操作,下面讓我們看看它是如何解析的:
CSS Code復制內容到剪貼板
- h2 {
- // 不執行除法操作,原樣輸出
- font-size: 16px / 24px;
-
- // 使用插值語法之後,原樣輸出
- font-size: #{$base-size} / #{$line-height};
-
- // 使用括號包裹之後,執行除法操作
- font-size: (16px / 24px);
-
- // 使用變量,執行除法操作
- font-size: $base-size / $line-height;
-
- // 調用函數,執行除法操作
- opacity: random(4) / 5;
-
- // 使用算術操作符,執行除法操作
- padding-right: 2px / 4px + 3px;
- }
Sass 中的操作符也具有優先級的概念,規則如下:
括號中的操作具有最高優先級
乘法、除法的優先級高於加法和減法
CSS Code復制內容到剪貼板
- h2 {
- width: 3px * 5 + 5px; // 20px
-
- width: 3 * (5px + 5px); // 30px
-
- width: 3px + (6px / 2) * 3; // 12px
- }
相等操作符
相等操作符常用於條件語句,用來比較左右運算子是否相等,最終返回布爾值:
操作符 |
簡介 |
==
相等
!=
不等
相等操作符適用於所有類型,下面來看兩個示例。在第一個示例中,我們使用 == 來測試 $font 的類型,並輸出對應的信息:
CSS Code復制內容到剪貼板
- @mixin font-fl($font){
- &:after {
- @if(type-of($font) == string) {
- content: 'My font is: #{$font}.';
- } @else {
- content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
- }
- }
- }
-
- h2{
- @include font-fl(sans-serif);
- }
編譯結果:
CSS Code復制內容到剪貼板
- h2:after {
- content: 'My font is: sans-serif.';
- }
在第二個示例中,定義了一個列表並檢查該列表的長度。通過使用 % 操作符,我們可以計算每個元素的長度,然後根據特定條件對 color 進行賦值:
CSS Code復制內容到剪貼板
- $list: "tomato", "lime", "lightblue";
-
- @mixin fg-color($property) {
- @each $item in $list {
- $color-length: str-length($item);
- @if( $color-length % 2 != 0 ) {
- #{$property}: unquote($item);
- }
- }
- }
-
- h2 {
- @include fg-color(color);
- }
編譯結果:
CSS Code復制內容到剪貼板
- h2 {
- color: lightblue;
- }
- 這裡需要提醒的是,Sass 不支持嚴格相等操作符 ===,不過從下面的示例中你會發現,Sass 解析 == 的原則就是嚴格相等:
-
- // 在 Javascript 中
- ("5" == 5) // true
-
- ("5" === 5) // false
-
- // 在 Sass 中
- ("5" == 5) // false
-
- (20px == 20) // true (Libsass 不支持)
比較操作符
與相等操作符類似,比較操作符用來比較數值。在 Sass 中,支持以下比較操作符:
操作符 |
簡介 |
>
大於
>=
大於或者等於
<
小於
<=
小於或者等於
下面是一個簡單的示例:
CSS Code復制內容到剪貼板
- $padding: 50px;
-
- h2 {
- @if($padding <= 20px) {
- padding: $padding;
- } @else {
- padding: $padding / 2;
- }
- }
編譯結果:
CSS Code復制內容到剪貼板
- h2 {
- padding: 25px;
- }
邏輯操作符
邏輯操作符常用於測試多個條件表達式,Sass 支持的邏輯操作符如下所示:
操作符 |
條件 |
簡介 |
and
x and y
與操作
or
x or y
或操作
not
not x
取反
下面通過一個示例來解釋邏輯操作符的用法:定義一個 map,存儲按鈕的狀態以及對應的顏色,然後創建一個條件語句,用來測試 map 內元素的多少。如果通過條件測試,那麼就給 h2 添加 background-color 屬性。代碼如下所示:
CSS Code復制內容到剪貼板
- $list-map: (success: lightgreen, alert: tomato, info: lightblue);
-
- @mixin button-state($btn-state) {
- @if (length($list-map) > 2 or length($list-map) < 5) {
- background-color: map-get($list-map, $btn-state);
- }
- }
-
- .btn {
- @include button-state(success);
- }
編譯結果:
CSS Code復制內容到剪貼板
- .btn {
- background-color: lightgreen;
- }
如你所見,因為 map 的元素數量為 3,符合 length($list-map) > 2 – length($list-map) < 5 的條件,所以返回的結果是 true。
請注意以下兩個條件的差異:
CSS Code復制內容到剪貼板
- @if (length($list-map) > 2 or not (length($list-map) == 3)) {...}
- // true
-
- @if (length($list-map) > 2 and not (length($list-map) == 3)) {...}
- // false
字符串操作符
在第一節我們就講過,+ 可以用來拼接字符串。下面是一個 + 拼接字符串的規則:
如果字符串被引號包裹,那麼它拼接任何字符串的結果也會被引號包裹
如果字符串沒有被引號包裹,那麼它拼接任何字符串的結果也不會被引號包裹
下面是一個實際示例:
CSS Code復制內容到剪貼板
- @mixin string-concat {
- &:after {
- content: "My favorite language is " + Sass;
- font: Arial + " sans-serif";
- }
- }
-
- h2 {
- @include string-concat;
- }
編譯結果:
CSS Code復制內容到剪貼板
- h2:after {
- content: "My favorite language is Sass";
- font: Arial sans-serif;
- }
此外,我們可以使用差值語法動態改變字符串,如果插值的結果為 null,那麼該值不會被輸出,下面是一個示例:
CSS Code復制內容到剪貼板
- @mixin string-concat ($language) {
- &:after {
- content: "My favorite language is #{$language}";
-
- // second way without using interpolation
- //content: "My favorite language is " + $language;
- }
- }
-
- h2 {
- @include string-concat(Sass);
- }
編譯結果:
CSS Code復制內容到剪貼板
- h2:after {
- content: "My favorite language is Sass";
- }
顏色運算
在上面的第二節中,我們分析了算術操作符,在 Sass 中一個有趣的事情就是,我們可以使用算術運算符操作顏色。請看一個實例:
CSS Code復制內容到剪貼板
- h2 {
- color: #468499 + #204479;
- }
編譯結果:
CSS Code復制內容到剪貼板
- h2 {
- color: #66c8ff;
- }
那麼,其中的解析原則是什麼呢?首先我們需要記住,十六進制顏色值是由紅綠藍三種值組合而成,然後在執行相加時,每兩個十六進制數值分組相加:46+20=66 (紅色), 84+44=c8 (綠色), 和 99+79=ff (藍色)。
下面是我們的最後一個示例,和上面示例的差別在於它使用了 rgba():
CSS Code復制內容到剪貼板
- h2 {
- color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);
-
- color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);
- // 報錯,透明通道的值必須一致
- }
使用算術操作符處理 rgba() 和 hsla() 時,必須讓透明通道的值保持一致。