? sass 運(yùn)算符雖然沒(méi)有像那些編程語(yǔ)言那么強(qiáng)大，但為了更靈活的輸出css，也增強(qiáng)了一些運(yùn)算符的功能，例如賦值運(yùn)算符、等號(hào)操作符、比較運(yùn)算符、邏輯運(yùn)算符、字符串運(yùn)算符...等等，接下來(lái)就來(lái)詳細(xì)介紹下這些運(yùn)算符的基本使用
創(chuàng)新互聯(lián)主營(yíng)潁泉網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開(kāi)發(fā),潁泉h5微信小程序搭建,潁泉網(wǎng)站營(yíng)銷(xiāo)推廣歡迎潁泉等地區(qū)企業(yè)咨詢(xún)
賦值運(yùn)算符就是把一個(gè)值賦值給一個(gè)變量，通過(guò)冒號(hào)（：）的方式進(jìn)行承接（很多編程語(yǔ)言是=），例如：
重慶分公司
重慶分公司
$font-size:16px;
也可以把一個(gè)變量賦值給另一個(gè)變量
$font-size:16px;
$h3:$font-size;
賦值的變量必須先有值
等號(hào)操作符用于比較兩個(gè)表達(dá)式的值是否相等，所有數(shù)據(jù)類(lèi)型都支持等號(hào)運(yùn)算符:
| 符號(hào) | 說(shuō)明 |
|---|---|
| == | 等于 |
| != | 不等于 |
例1：數(shù)字比較：
$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;
}
}
所有數(shù)據(jù)類(lèi)型均支持相等運(yùn)算 == 或 !=，此外，每種數(shù)據(jù)類(lèi)型也有其各自支持的運(yùn)算方式。
比較運(yùn)算符主要用于兩個(gè)數(shù)值（整數(shù)與小數(shù)）間的比較，操作符有
| 符號(hào) | 說(shuō)明 |
|---|---|
| < （lt） | 小于 |
| > （gt） | 大于 |
| <= （lte） | 小于等于 |
| >= （gte） | 大于等于 |
例如
$theme:3;
.container {
@if $theme >= 5 {
background-color: red;
}
@else {
background-color: blue;
}
}
其它語(yǔ)言還有字符串的比較，但這里是不行的
邏輯運(yùn)算符通常用于連接多個(gè)表達(dá)式，用下真判斷條件是否成立，它們有and、or、not
| 符號(hào) | 說(shuō)明 |
|---|---|
| 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;
}
}
數(shù)字操作符通常是對(duì)數(shù)字（整數(shù)或小數(shù)）進(jìn)行計(jì)算，但是某些操作符（/或+）會(huì)有特殊情況，后面分開(kāi)詳細(xì)講解
| 符號(hào) | 說(shuō)明 |
|---|---|
| + | 加 |
| - | 減 |
| * | 乘 |
| / | 除 |
| % | 取模 |
例如
/*
+、-、*、/、%
線(xiàn)數(shù)字、百分號(hào)、css部分單位（px、pt、in...）
+
線(xiàn)數(shù)字與百分號(hào)或單位運(yùn)算時(shí)會(huì)自動(dòng)轉(zhuǎn)化成相應(yīng)的百分比與單位值
*/
.container {
/* ==================+ 運(yùn)算===================== */
width: 50 + 20;
width: 50 + 20%;
width: 50% + 20%;
width: 10px + 20px;
width: 10pt + 20px;
width: 10pt + 20;
width: 10px + 10;
/* ==================- 運(yùn)算===================== */
height: 50 - 30;
height: 10 - 30%;
height: 60% - 30%;
height: 50px - 20px;
height: 50pt - 20px;
height: 50pt - 40;
/* ==================* 運(yùn)算===================== */
height: 50 * 30;
height: 10 * 30%;
/* height: 60% * 30%; 出現(xiàn)了兩個(gè)百分號(hào)*/
/* height: 50px * 20px; 出現(xiàn)了兩個(gè)單位*/
height: 50 * 2px;
height: 50pt * 4;
/* ==================/運(yùn)算 (除完后最多只能保留一種單位)===================== */
$width: 100px;
width: 10 / 5;
width: 10px / 5px;
width: 10px / 10 * 2;
width: 20px / 2px * 5%;
width: ($width/2); // 使用變量與括號(hào)
z-index: round(10)/2; // 使用了函數(shù)
height: (500px/2); // 使用了括號(hào)
/* ==================% 運(yùn)算===================== */
width: 10 % 3;
width: 50 % 3px;
width: 50px % 4px;
width: 50px % 7;
width: 50% % 7;
width: 50% % 9%;
width: 50px % 10pt; // 50px % 13.px
width: 50px % 13.px;
width: 50px + 10pt;
/* width: 50px % 5%; 單位不統(tǒng)一*/
}
/ 在 CSS 中通常起到分隔數(shù)字的用途，SassScript 作為 CSS 語(yǔ)言的拓展當(dāng)然也支持這個(gè)功能，同時(shí)也賦予了 / 除法運(yùn)算的功能。也就是說(shuō)，如果 / 在 SassScript 中把兩個(gè)數(shù)字分隔，編譯后的 CSS 文件中也是同樣的作用。
例如
$width: 1000px;
div {
font: 16px/30px Arial, Helvetica, sans-serif; // 不運(yùn)算
width: ($width/2); // 使用變量與括號(hào)
z-index: round(10)/2; // 使用了函數(shù)
height: (500px/2); // 使用了括號(hào)
margin-left: 5px + 8px/2px; // 使用了+表達(dá)式
}
如果需要使用變量，同時(shí)又要確保 / 不做除法運(yùn)算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語(yǔ)句將變量包裹。
+ 可用于連接字符串
注意：如果有引號(hào)字符串（位于 + 左側(cè)）連接無(wú)引號(hào)字符串，運(yùn)算結(jié)果是有引號(hào)的，相反，無(wú)引號(hào)字符串（位于 + 左側(cè)）連接有引號(hào)字符串，運(yùn)算結(jié)果則沒(méi)有引號(hào)。
有問(wèn)題？？？？ 如果有一個(gè)值是函數(shù)返回的，情況可能不一樣
例如
.container {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
運(yùn)行符的基本操作就給大家介紹到這里，更多教程請(qǐng)關(guān)注“老姚實(shí)戰(zhàn)營(yíng)”。
