sass 運算符雖然沒有像那些編程語言那麼強大，但為了更靈活的輸出css，也增強了一些運算符的功能，例如賦值運算符、等號操作符、比較運算符、邏輯運算符、字元串運算符...等等，接下來就來詳細介紹下這些運算符的基本使用 賦值運算符 賦值運算符就是把一個值賦值給一個變數，通過冒號（：）的方式進行承接 ...
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;
}
}
所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。
比較運算符
比較運算符主要用於兩個數值（整數與小數）間的比較，操作符有
| 符號 | 說明 |
|---|---|
| < （lt） | 小於 |
| > （gt） | 大於 |
| <= （lte） | 小於等於 |
| >= （gte） | 大於等於 |
例如
$theme:3;
.container {
@if $theme >= 5 {
background-color: red;
}
@else {
background-color: blue;
}
}
其它語言還有字元串的比較，但這裡是不行的
邏輯運算符
邏輯運算符通常用於連接多個表達式，用下真判斷條件是否成立，它們有and、or、not
| 符號 | 說明 |
|---|---|
| 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";
}
運行符的基本操作就給大家介紹到這裡，更多教程請關註“老姚實戰營”。
