SASS 運算 (Operations)符的基本使用

​ sass 運算符雖然沒有像那些編程語言那麼強大，但為了更靈活的輸出css，也增強了一些運算符的功能，例如賦值運算符、等號操作符、比較運算符、邏輯運算符、字元串運算符...等等，接下來就來詳細介紹下這些運算符的基本使用

賦值運算符

賦值運算符就是把一個值賦值給一個變數，通過冒號（：）的方式進行承接（很多編程語言是=），例如：

$font-size:16px;

也可以把一個變數賦值給另一個變數

$font-size:16px;
$h3:$font-size;

賦值的變數必須先有值

等號操作符

等號操作符用於比較兩個表達式的值是否相等，所有數據類型都支持等號運算符:

例1：數字比較：

$theme:1;
.container {
    @if $theme==1 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

例2：字元串比較：

$theme:"blue";
.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。

比較運算符

比較運算符主要用於兩個數值（整數與小數）間的比較，操作符有

例如

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

其它語言還有字元串的比較，但這裡是不行的

邏輯運算符

邏輯運算符通常用於連接多個表達式，用下真判斷條件是否成立，它們有and、or、not

例如

$width:100;
$height:200;
$last:false;
div {
    @if $width>50 and $height<300 {
        font-size: 16px;
    }
    @else {
        font-size: 14px;
    }
    @if not $last {
        border-color: red;
    }
    @else {
        border-color: blue;
    }
}

數字操作符

數字操作符通常是對數字（整數或小數）進行計算，但是某些操作符（/或+）會有特殊情況，後面分開詳細講解

例如

/* 
    +、-、*、/、%
    線數字、百分號、css部分單位（px、pt、in...）
    +
    線數字與百分號或單位運算時會自動轉化成相應的百分比與單位值
*/
.container {
    /* ==================+ 運算===================== */
    width: 50 + 20;
    width: 50 + 20%;
    width: 50% + 20%;
    width: 10px + 20px;
    width: 10pt + 20px;
    width: 10pt + 20;
    width: 10px + 10;
    /* ==================- 運算===================== */
    height: 50 - 30;
    height: 10 - 30%;
    height: 60% - 30%;
    height: 50px - 20px;
    height: 50pt - 20px;
    height: 50pt - 40;
    /* ==================* 運算===================== */
    height: 50 * 30;
    height: 10 * 30%;
    /* height: 60% * 30%; 出現了兩個百分號*/
    /* height: 50px * 20px; 出現了兩個單位*/
    height: 50 * 2px;
    height: 50pt * 4;
    /* ==================/運算 (除完後最多只能保留一種單位)===================== */
    $width: 100px;
    width: 10 / 5;
    width: 10px / 5px;
    width: 10px / 10 * 2;
    width: 20px / 2px * 5%;
    width: ($width/2); // 使用變數與括弧
    z-index: round(10)/2; // 使用了函數
    height: (500px/2); // 使用了括弧
    /* ==================% 運算===================== */
    width: 10 % 3;
    width: 50 % 3px;
    width: 50px % 4px;
    width: 50px % 7;
    width: 50% % 7;
    width: 50% % 9%;
    width: 50px % 10pt; // 50px % 13.33333px  
    width: 50px % 13.33333px;
    width: 50px + 10pt;
    /* width: 50px % 5%; 單位不統一*/
}

/ 在 CSS 中通常起到分隔數字的用途，SassScript 作為 CSS 語言的拓展當然也支持這個功能，同時也賦予了 / 除法運算的功能。也就是說，如果 / 在 SassScript 中把兩個數字分隔，編譯後的 CSS 文件中也是同樣的作用。

以下三種情況 / 將被視為除法運算符號：

• 如果值或值的一部分，是變數或者函數的返回值
• 如果值被圓括弧包裹
• 如果值是算數表達式的一部分

例如

$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不運算
    width: ($width/2); // 使用變數與括弧
    z-index: round(10)/2; // 使用了函數
    height: (500px/2); // 使用了括弧
    margin-left: 5px + 8px/2px; // 使用了+表達式
}

如果需要使用變數，同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語句將變數包裹。

字元串運算

+ 可用於連接字元串

註意：如果有引號字元串（位於 + 左側）連接無引號字元串，運算結果是有引號的，相反，無引號字元串（位於 + 左側）連接有引號字元串，運算結果則沒有引號。

有問題？？？？ 如果有一個值是函數返回的，情況可能不一樣

例如

.container {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}

運行符的基本操作就給大家介紹到這裡，更多教程請關註“老姚實戰營”。