亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS的Sass框架中常用的操作符的使用教程

w3cplus   發(fā)布時間：2016-03-08 10:38:53   作者：南北   我要評論
這篇文章主要介紹了CSS的Sass框架中常用的操作符的使用教程,整理了一些基本的邏輯操作符和字符串操作符等的翻譯和用法,需要的朋友可以參考下

賦值操作符

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

CSS Code復制內容到剪貼板
  1. $main-color: lightgray;  

算術操作符

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

操作符 簡介
+ 加
- 減
* 乘
/ 除
% 取余

注意，上面的操作符只能用于單位相同的數值運算：

CSS Code復制內容到剪貼板
  1. h2 {   
  2.     font-size: 5px + 2em; // 單位不一致，編譯報錯   
  3.     font-size: 5px + 2; // 7px  
  4. }  

此外，兩個單位相同的數值相乘無法生成有效的 CSS：

CSS Code復制內容到剪貼板
  1. h2 {   
  2.     font-size: 5px * 2px; // invalid CSS   
  3. }  

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

CSS Code復制內容到剪貼板
  1. font: 16px / 24px Arial sans-serif;   
  2. background: url("http://example.com") no-repeat fixed center / cover;  

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

CSS Code復制內容到剪貼板
  1. h2 {   
  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.     // 調用函數，執(zhí)行除法操作   
  15.     opacity: random(4) / 5;    
  16.   
  17.     // 使用算術操作符，執(zhí)行除法操作   
  18.     padding-right: 2px / 4px + 3px;    
  19. }  

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

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

CSS Code復制內容到剪貼板
  1. h2 {   
  2.     width: 3px * 5 + 5px; // 20px  
  3.   
  4.     width: 3 * (5px + 5px); // 30px  
  5.   
  6.     width: 3px + (6px / 2) * 3; // 12px  
  7.  }  

相等操作符

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

操作符 簡介
== 相等
!= 不等

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

CSS Code復制內容到剪貼板
  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. h2{   
  12.     @include font-fl(sans-serif);   
  13. }  

編譯結果：

CSS Code復制內容到剪貼板
  1. h2:after {   
  2.     content: 'My font is: sans-serif.';   
  3. }  

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

CSS Code復制內容到剪貼板
  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. h2 {   
  13.     @include fg-color(color);   
  14. }  

編譯結果：

CSS Code復制內容到剪貼板
  1. h2 {   
  2.     color: lightblue;   
  3. }   
  4. 這里需要提醒的是，Sass 不支持嚴格相等操作符 ===，不過從下面的示例中你會發(fā)現，Sass 解析 == 的原則就是嚴格相等：   
  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 不支持)  

比較操作符

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

操作符 簡介
> 大于
>= 大于或者等于
< 小于
<= 小于或者等于

下面是一個簡單的示例：

CSS Code復制內容到剪貼板
  1. $padding: 50px;   
  2.   
  3. h2 {   
  4.     @if($padding <= 20px) {   
  5.         padding: $padding;   
  6.     } @else {   
  7.         padding: $padding / 2;   
  8.     }   
  9. }  

編譯結果：

CSS Code復制內容到剪貼板
  1. h2 {   
  2.     padding: 25px;   
  3. }  

邏輯操作符

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

操作符 條件 簡介
and x and y 與操作
or x or y 或操作
not not x 取反

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

CSS Code復制內容到剪貼板
  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. }  

編譯結果：

CSS Code復制內容到剪貼板
  1. .btn {   
  2.     background-color: lightgreen;   
  3. }  

如你所見，因為 map 的元素數量為 3，符合 length($list-map) > 2 – length($list-map) < 5 的條件，所以返回的結果是 true。

請注意以下兩個條件的差異：

CSS Code復制內容到剪貼板
  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é)我們就講過，+ 可以用來拼接字符串。下面是一個 + 拼接字符串的規(guī)則：

如果字符串被引號包裹，那么它拼接任何字符串的結果也會被引號包裹
如果字符串沒有被引號包裹，那么它拼接任何字符串的結果也不會被引號包裹
下面是一個實際示例：

CSS Code復制內容到剪貼板
  1. @mixin string-concat {   
  2.     &:after {   
  3.         content: "My favorite language is " + Sass;   
  4.         font: Arial + " sans-serif";   
  5.     }   
  6. }   
  7.   
  8. h2 {   
  9.     @include string-concat;   
  10. }  

編譯結果：

CSS Code復制內容到剪貼板
  1. h2:after {   
  2.     content: "My favorite language is Sass";   
  3.     font: Arial sans-serif;   
  4. }  

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

CSS Code復制內容到剪貼板
  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. h2 {   
  11.     @include string-concat(Sass);   
  12. }  

編譯結果：

CSS Code復制內容到剪貼板
  1. h2:after {   
  2.     content: "My favorite language is Sass";   
  3. }  

顏色運算

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

CSS Code復制內容到剪貼板
  1. h2 {   
  2.     color: #468499 + #204479;   
  3. }  

編譯結果:

CSS Code復制內容到剪貼板
  1. h2 {   
  2.     color: #66c8ff;   
  3. }  

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

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

CSS Code復制內容到剪貼板
  1. h2 {   
  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.     // 報錯，透明通道的值必須一致   
  6. }  

使用算術操作符處理 rgba() 和 hsla() 時，必須讓透明通道的值保持一致。

相關文章

  • CSS框架sass的簡單一覽

    這篇文章主要介紹了CSS框架sass的簡單一覽,像嵌套屬性和運算符等主要特性都在文中有簡單的介紹,需要的朋友可以參考下
    2015-07-20

  • CSS的SASS樣式編程指南

    這篇文章主要介紹了CSS的SASS樣式編程指南,包括對于嵌套器和注釋的使用等方面,需要的朋友可以參考下
    2015-07-12

  • 學習CSS預處理器:Sass和less進行對比

    Css可以讓你做很多事情，但它畢竟是給瀏覽器認的東西，對開發(fā)者來說，Css缺乏很多特性
    2012-07-11

  • sass(scss）的安裝與使用教程

    CSS預編譯器有 SASS LESS Stylus等等，SCSS是SASS3引入的新語法。這篇文章給大家介紹sass(scss）的安裝與使用教程，感興趣的朋友一起看看吧
    2018-10-15

最新評論