CSS中如何使用Sass框架

今天就跟大家聊聊有關(guān)CSS中如何使用Sass框架，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

賦值操作符

Sass 使用冒號（ : ）來定義一個(gè)變量：

CSS Code復(fù)制內(nèi)容到剪貼板

1. $main-color: lightgray;  

算術(shù)操作符

算術(shù)操作符用于執(zhí)行數(shù)學(xué)計(jì)算，下面是 Sass 所支持的算術(shù)操作符：

注意，上面的操作符只能用于單位相同的數(shù)值運(yùn)算：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     font-size: 5px + 2em; // 單位不一致，編譯報(bào)錯(cuò)   

3.     font-size: 5px + 2; // 7px  

4. }  

此外，兩個(gè)單位相同的數(shù)值相乘無法生成有效的 CSS：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     font-size: 5px * 2px; // invalid CSS   

3. }  

如你所知，/ 操作符本身就是 CSS 簡寫語法的一部分，比如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. font: 16px / 24px Arial sans-serif;   

2. background: url("http://example.com") no-repeat fixed center / cover;  

但是，Sass 重載了該運(yùn)算符，用于執(zhí)行除法操作，下面讓我們看看它是如何解析的：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     // 不執(zhí)行除法操作，原樣輸出   

3.     font-size: 16px / 24px;    

4.   

5.     // 使用插值語法之后，原樣輸出   

6.     font-size: #{$base-size} / #{$line-height};    

7.   

8.     // 使用括號包裹之后，執(zhí)行除法操作   

9.     font-size: (16px / 24px);    

10.   

11.     // 使用變量，執(zhí)行除法操作   

12.     font-size: $base-size / $line-height;    

13.   

14.     // 調(diào)用函數(shù)，執(zhí)行除法操作   

15.     opacity: random(4) / 5;    

16.   

17.     // 使用算術(shù)操作符，執(zhí)行除法操作   

18.     padding-right: 2px / 4px + 3px;    

19. }  

Sass 中的操作符也具有優(yōu)先級的概念，規(guī)則如下：

括號中的操作具有最高優(yōu)先級
乘法、除法的優(yōu)先級高于加法和減法

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     width: 3px * 5 + 5px; // 20px  

3.   

4.     width: 3 * (5px + 5px); // 30px  

5.   

6.     width: 3px + (6px / 2) * 3; // 12px  

7.  }  

相等操作符

相等操作符常用于條件語句，用來比較左右運(yùn)算子是否相等，最終返回布爾值：

相等操作符適用于所有類型，下面來看兩個(gè)示例。在第一個(gè)示例中，我們使用 == 來測試 $font 的類型，并輸出對應(yīng)的信息：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @mixin font-fl($font){   

2.     &:after {   

3.         @if(type-of($font) == string) {   

4.             content: 'My font is: #{$font}.';   

5.         } @else {   

6.             content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';   

7.         }   

8.     }   

9. }   

10.   

11. h3{   

12.     @include font-fl(sans-serif);   

13. }  

編譯結(jié)果：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h2:after {   

2.     content: 'My font is: sans-serif.';   

3. }  

在第二個(gè)示例中，定義了一個(gè)列表并檢查該列表的長度。通過使用 % 操作符，我們可以計(jì)算每個(gè)元素的長度，然后根據(jù)特定條件對 color 進(jìn)行賦值：

CSS Code復(fù)制內(nèi)容到剪貼板

1. $list: "tomato", "lime", "lightblue";   

2.   

3. @mixin fg-color($property) {   

4.     @each $item in $list {   

5.         $color-length: str-length($item);   

6.         @if( $color-length % 2 != 0 ) {   

7.             #{$property}: unquote($item);   

8.         }   

9.     }   

10. }   

11.   

12. h3 {   

13.     @include fg-color(color);   

14. }  

編譯結(jié)果：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     color: lightblue;   

3. }   

4. 這里需要提醒的是，Sass 不支持嚴(yán)格相等操作符 ===，不過從下面的示例中你會(huì)發(fā)現(xiàn)，Sass 解析 == 的原則就是嚴(yán)格相等：   

5.   

6. // 在 javascript 中   

7. ("5" == 5) // true   

8.   

9. ("5" === 5) // false   

10.   

11. // 在 Sass 中   

12. ("5" == 5) // false   

13.   

14. (20px == 20) // true (Libsass 不支持)  

比較操作符

與相等操作符類似，比較操作符用來比較數(shù)值。在 Sass 中，支持以下比較操作符：

下面是一個(gè)簡單的示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. $padding: 50px;   

2.   

3. h3 {   

4.     @if($padding <= 20px) {   

5.         padding: $padding;   

6.     } @else {   

7.         padding: $padding / 2;   

8.     }   

9. }  

編譯結(jié)果：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     padding: 25px;   

3. }  

邏輯操作符

邏輯操作符常用于測試多個(gè)條件表達(dá)式，Sass 支持的邏輯操作符如下所示：

下面通過一個(gè)示例來解釋邏輯操作符的用法：定義一個(gè) map，存儲(chǔ)按鈕的狀態(tài)以及對應(yīng)的顏色，然后創(chuàng)建一個(gè)條件語句，用來測試 map 內(nèi)元素的多少。如果通過條件測試，那么就給 h3 添加 background-color 屬性。代碼如下所示：

CSS Code復(fù)制內(nèi)容到剪貼板

1. $list-map: (success: lightgreen, alert: tomato, info: lightblue);   

2.   

3. @mixin button-state($btn-state) {   

4.     @if (length($list-map) > 2 or length($list-map) < 5) {   

5.         background-color: map-get($list-map, $btn-state);   

6.     }   

7. }   

8.   

9. .btn {   

10.     @include button-state(success);   

11. }  

編譯結(jié)果：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .btn {   

2.     background-color: lightgreen;   

3. }  

如你所見，因?yàn)?map 的元素?cái)?shù)量為 3，符合 length($list-map) > 2 &ndash; length($list-map) < 5 的條件，所以返回的結(jié)果是 true。

請注意以下兩個(gè)條件的差異：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @if (length($list-map) > 2 or not (length($list-map) == 3)) {...}    

2. // true   

3.   

4. @if (length($list-map) > 2 and not (length($list-map) == 3)) {...}    

5. // false  

字符串操作符

在第一節(jié)我們就講過，+ 可以用來拼接字符串。下面是一個(gè) + 拼接字符串的規(guī)則：

如果字符串被引號包裹，那么它拼接任何字符串的結(jié)果也會(huì)被引號包裹
如果字符串沒有被引號包裹，那么它拼接任何字符串的結(jié)果也不會(huì)被引號包裹
下面是一個(gè)實(shí)際示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @mixin string-concat {   

2.     &:after {   

3.         content: "My favorite language is " + Sass;   

4.         font: Arial + " sans-serif";   

5.     }   

6. }   

7.   

8. h3 {   

9.     @include string-concat;   

10. }  

編譯結(jié)果：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h2:after {   

2.     content: "My favorite language is Sass";   

3.     font: Arial sans-serif;   

4. }  

此外，我們可以使用差值語法動(dòng)態(tài)改變字符串，如果插值的結(jié)果為 null，那么該值不會(huì)被輸出，下面是一個(gè)示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @mixin string-concat ($language) {   

2.     &:after {   

3.         content: "My favorite language is #{$language}";   

4.   

5.         // second way without using interpolation   

6.         //content: "My favorite language is " + $language;   

7.     }   

8. }   

9.   

10. h3 {   

11.     @include string-concat(Sass);   

12. }  

編譯結(jié)果：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h2:after {   

2.     content: "My favorite language is Sass";   

3. }  

顏色運(yùn)算

在上面的第二節(jié)中，我們分析了算術(shù)操作符，在 Sass 中一個(gè)有趣的事情就是，我們可以使用算術(shù)運(yùn)算符操作顏色。請看一個(gè)實(shí)例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     color: #468499 + #204479;   

3. }  

編譯結(jié)果:

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     color: #66c8ff;   

3. }  

那么，其中的解析原則是什么呢？首先我們需要記住，十六進(jìn)制顏色值是由紅綠藍(lán)三種值組合而成，然后在執(zhí)行相加時(shí)，每兩個(gè)十六進(jìn)制數(shù)值分組相加：46+20=66 (紅色), 84+44=c8 (綠色), 和 99+79=ff (藍(lán)色)。

下面是我們的最后一個(gè)示例，和上面示例的差別在于它使用了 rgba()：

CSS Code復(fù)制內(nèi)容到剪貼板

1. h3 {   

2.     color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);   

3.   

4.     color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);   

5.     // 報(bào)錯(cuò)，透明通道的值必須一致   

6. }  

看完上述內(nèi)容，你們對CSS中如何使用Sass框架有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。