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";
}

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

標籤：Html/Css

上一篇：V8中的快慢陣列（附原始碼、圖文更易理解😃）

下一篇：妙用 CSS 構建花式透視背景效果