Sass 運(yùn)算

1. 前言

運(yùn)算是一種通過(guò)已知量可能的組合，獲得新的量的行為。Sass 中也為我們提供了各種各樣的運(yùn)算，以便我們更好的處理樣式代碼。本節(jié)我們將學(xué)習(xí) Sass 中的數(shù)字運(yùn)算、關(guān)系運(yùn)算、除法運(yùn)算、顏色運(yùn)算、字符串運(yùn)算等等…

2. 什么是 Sass 運(yùn)算？

運(yùn)算從我們小時(shí)候就開(kāi)始學(xué)習(xí)了，那在 Sass 中的運(yùn)算是什么呢？
在我們寫(xiě)樣式的時(shí)候，很多場(chǎng)景我們是需要用到計(jì)算的，而一般我們都是通過(guò) javascript 來(lái)計(jì)算，CSS3 中也提供了用于運(yùn)算的函數(shù) calc() ，可能在工作中你使用過(guò)這個(gè)函數(shù)用來(lái)計(jì)算長(zhǎng)度值，能用到的地方也非常有限。而在 Sass 中，擴(kuò)展出了很多計(jì)算方法，使得你不止是可以計(jì)算長(zhǎng)度值，還能做一些關(guān)系運(yùn)算甚至顏色值的運(yùn)算等等。這使我們可以把運(yùn)算應(yīng)用于更多的場(chǎng)景，來(lái)解決更復(fù)雜的問(wèn)題，運(yùn)算也是 Sass 的基本特性之一，下面我們一起來(lái)學(xué)習(xí)它～

3. 語(yǔ)法示例

下面我們舉幾個(gè)簡(jiǎn)單的示例來(lái)感受下 Sass 的運(yùn)算：

p {
  width: 9px + 10px;
  height:(600px/2);
  &:before{
    content: 'a' + 'b';
  }
  is: 1 == 1; // 僅作為示例，css和sass中無(wú)此屬性
}

上面我們用了加法運(yùn)算、除法運(yùn)算、字符串運(yùn)算和布爾值運(yùn)算，轉(zhuǎn)換為 CSS 的代碼如下：

p {
  width: 19px;
  height: 300px;
  is: true;
}
p:before {
  content: "ab";
}

此時(shí)你可能不是很理解，沒(méi)關(guān)系，下面我們開(kāi)始逐一講解～～

4. 使用場(chǎng)景

這部分我們將詳細(xì)講解 Sass 運(yùn)算中的：

• 數(shù)字運(yùn)算

• 圓括號(hào)

• 除法運(yùn)算

• 關(guān)系運(yùn)算

• 顏色運(yùn)算

• 字符串運(yùn)算

• 布爾運(yùn)算

4.1 數(shù)字運(yùn)算

在 Sass 中我們可以對(duì)數(shù)字類型的值進(jìn)行加減乘除、取整的運(yùn)算。在使用運(yùn)算的過(guò)程中，一定要注意不能使用不兼容的單位！（在除法運(yùn)算中除外），什么意思呢？就是說(shuō)兩個(gè)數(shù)字相加，你不能一個(gè)數(shù)字單位是 px 另一個(gè)數(shù)字單位是 em 。還有一點(diǎn)需要注意的是，如果你使用乘法運(yùn)算，你只需要為其中的一個(gè)數(shù)值寫(xiě)上單位就好。數(shù)值的運(yùn)算包括加 (+)、減 (-)、乘 (*)、除 (/)、取模 (%)，乘法只需要有一個(gè)數(shù)值帶單位即可，還有就是除法稍有特殊，后面會(huì)單獨(dú)講解，下面我來(lái)寫(xiě)一段代碼看一下 Sass 的數(shù)字運(yùn)算：

p {
  width: 10px + 20px; // 加法運(yùn)算 (不能使用不兼容的單位)
  height: 500px +50; // 加法運(yùn)算無(wú)單位的數(shù)字可以與有單位的一起使用
  max-width: 800px - 100px; // 減法
  max-height: 400px * 2; // 乘法，一個(gè)數(shù)值帶單位即可
  font-size: 30px % 4; // 模運(yùn)算
}

上面這段代碼轉(zhuǎn)換成 CSS 為：

p {
  width: 30px;
  height: 550px;
  max-width: 700px;
  max-height: 800px;
  font-size: 2px;
}

上面我們對(duì) Sass 數(shù)值運(yùn)算的加減乘和模運(yùn)算做了演示，在 Sass 的數(shù)字運(yùn)算中還有一個(gè)需要特別注意的：減法運(yùn)算符兩邊需要加空格或者都不加空格，也就是說(shuō)運(yùn)算符的兩邊是對(duì)稱的；為什么要這樣呢？因?yàn)闇p法運(yùn)算符 - 不僅僅表示減法，對(duì)于負(fù)數(shù)或者一元否定則只需要在其前面加空格就好，也就是說(shuō)這個(gè)標(biāo)識(shí)符還可以表示負(fù)數(shù)和一元否定；我們舉個(gè)例子來(lái)看下：

p {
  width: 10px - 5px; // 前后都有空格
  width: 10px-5px; // 前后都沒(méi)有空格
  width:10px -5px; // 只有前面有空格
}

上面這段 Sass 代碼將會(huì)被編譯成如下的 CSS :

p {
  width: 5px;
  width: 5px;
  width: 10px -5px;
}

我們可以看到上面的代碼，如果你只在 - 標(biāo)識(shí)符前面加了空格，其兩邊不對(duì)稱是不會(huì)對(duì)數(shù)值進(jìn)行運(yùn)算的，所以這個(gè)在你寫(xiě)代碼的過(guò)程中一定要注意！

4.2 圓括號(hào)

在講除法運(yùn)算之前，一定要先講一下這個(gè)圓括號(hào) () ，圓括號(hào)和數(shù)學(xué)運(yùn)算中一樣，可以來(lái)控制運(yùn)算順序，這個(gè)我們從小就學(xué)過(guò)，在 Sass 運(yùn)算中你同樣可以使用它來(lái)控制運(yùn)算順序。

另外就是如果你直使用除法運(yùn)算符， Sass 會(huì)把這當(dāng)成一個(gè)分隔符來(lái)處理，但如果你是寫(xiě)在圓括號(hào)內(nèi)就可以被當(dāng)作除法操作處理了，這也是圓括號(hào)在 Sass 中的另外一個(gè)作用！

4.3 除法運(yùn)算

在 CSS 中，你要知道 / 這個(gè)標(biāo)識(shí)符并不是代表除法的，一些 CSS 的屬性值是支持使用 / 來(lái)分隔的，所以在 Sass 中直接使用 / 也是會(huì)當(dāng)成分隔符來(lái)處理。但是呢，在以下情況下，Sass 將會(huì)把 / 視為除法運(yùn)算：

• 運(yùn)算符前后的值存儲(chǔ)在變量中或由函數(shù)返回
• 運(yùn)算符和前后的值被圓括號(hào)所包裹
• 值是另外一個(gè)表達(dá)式的一部分

下面我們來(lái)舉例看一下：

$one: 20px / 2;
$two: 10px;
p {
  width: 200px + 100px / 10; // 值是另外一個(gè)運(yùn)算表達(dá)式的一部分
  font-size: $one; // 前后的值存儲(chǔ)在變量中或由函數(shù)返回
  border-width: $two / 5; // 前后的值存儲(chǔ)在變量中或由函數(shù)返回
  height: (800px / 2); // 被圓括號(hào)所包裹
  max-width: 800px / 2; // 會(huì)被當(dāng)作分隔符來(lái)處理，而不是除法運(yùn)算
}

上面這段 Sass 代碼我對(duì)使用 / 的情況進(jìn)行了注釋，那么它轉(zhuǎn)換為 CSS 代碼是：

p {
  width: 210px;
  font-size: 10px;
  border-width: 2px;
  height: 400px;
  max-width: 800px/2;
}

上面我們看到了 Sass 除法運(yùn)算的使用，還有一種情況是：假如我在兩個(gè)變量之間使用 / 標(biāo)識(shí)符，而且我又不想對(duì)這兩個(gè)變量進(jìn)行除法運(yùn)算，我只是想對(duì)這兩個(gè)變量的值進(jìn)行分隔而已，那該怎么辦呢？那我們需要使用插值 #{} 來(lái)將兩個(gè)變量包裹住即可，關(guān)于插值以后的章節(jié)會(huì)有講解，這里我們先看一下如何做：

$one: 20px;
$two: 10;
p {
  width: $one / $two; // 沒(méi)有使用插值，會(huì)對(duì)變量值進(jìn)行除法運(yùn)算
  height: #{$one} / #{$two}; // 使用插值，不會(huì)進(jìn)行除法運(yùn)算
}

上面這段使用插值的代碼將會(huì)轉(zhuǎn)換為如下的 CSS 代碼：

p {
  width: 2px;
  height: 20px/10;
}

好了，除法運(yùn)算講完了，通過(guò)上面的講解，是不是感覺(jué) Sass 中的除法運(yùn)算和你腦海中的還是有差別的，還有一個(gè)值得注意的是，如果你使用除法運(yùn)算前后的值都帶有相同的單位，那么最后的結(jié)果是一個(gè)不帶單位的數(shù)值。在以后你使用除法運(yùn)算的時(shí)候一定要知道在 Sass 中 / 不僅僅代表除法運(yùn)算，你要用正確的方式來(lái)使用它！

4.4 關(guān)系運(yùn)算

在 Sass 中關(guān)系運(yùn)算來(lái)比較數(shù)字與數(shù)字間的大小，和數(shù)字運(yùn)算一樣，關(guān)系運(yùn)算也是不能使用不兼容的單位。關(guān)系運(yùn)算的返回值是布爾值（ true 或 false ），下面我們舉個(gè)例子看下：

p {
  width: 10px > 5px; // 大于
  width: 10 < 5px; // 小于
  width: 10 >= 5; // 大于等于
  width: 5 <= 5; // 小于等于
  width: 5 == 5; // 等于
}

在上面這個(gè)例子中，width 屬性的值是沒(méi)有布爾類型的，我這里這么舉例子是為了讓大家可以更直觀的感受，一般關(guān)系運(yùn)算不會(huì)直接應(yīng)用于樣式表中，在 Sass 的函數(shù)中應(yīng)用的比較多。那么上面這段代碼轉(zhuǎn)換成 CSS 如下：

p {
  width: true;
  width: false;
  width: true;
  width: true;
  width: true;
}

到這里你應(yīng)該了解 Sass 中的關(guān)系運(yùn)算了，切記我這里的代碼舉例只是為了讓大家直觀的感受，實(shí)際情況下并不會(huì)這么寫(xiě)。另外在 Sass 中使用相等運(yùn)算符去做比較的時(shí)候，對(duì)于數(shù)字類型，數(shù)字具有相同的值和相同的單位，或者在單位之間轉(zhuǎn)換時(shí)它們的值相等，則它們是相等的；對(duì)于字符串類型，具有相同內(nèi)容的未加引號(hào)和帶引號(hào)的字符串被認(rèn)為是相等的；對(duì)于顏色類型，具有相同的紅色、綠色、藍(lán)色和alpha值，則顏色是相等的；

4.5 顏色運(yùn)算

What ？這個(gè)一眼看上去可能會(huì)感覺(jué)很"另類"，顏色要怎么運(yùn)算呢？下面我們舉個(gè)例子看一下：

body {
  color: #020304 + #050203;
}

在進(jìn)行顏色值計(jì)算的時(shí)候是分段計(jì)算的，也就是 02 + 05 、03 + 02 、04 + 03，我們知道十六進(jìn)制顏色值是分為三組的（兩個(gè)數(shù)字一組），分別代表紅、綠、藍(lán)，所以在做運(yùn)算的時(shí)候也是按照這個(gè)來(lái)運(yùn)算的，那么上面這段代碼轉(zhuǎn)換成 CSS 為：

body {
  color: #070507;
}

上面我們講了顏色運(yùn)算，但是 Sass 官方給出了明確的說(shuō)明：不推薦使用顏色運(yùn)算，而使用顏色函數(shù)。什么原因呢？因?yàn)?Sass 顏色運(yùn)算所產(chǎn)生出來(lái)的色值可能和你感知的并不一致，所以不推薦使用。如果你使用了的話， Sass 也是支持的，但是會(huì)給出警告，強(qiáng)烈建議用戶避免使用顏色運(yùn)算！所以我們的教程里只是做了個(gè)演示，你可以了解下，但在實(shí)際開(kāi)發(fā)中不推薦使用顏色運(yùn)算，可以使用顏色函數(shù)來(lái)實(shí)現(xiàn)你的需求！

4.6 字符串運(yùn)算

在 Sass 中還允許對(duì)字符串進(jìn)行運(yùn)算，那對(duì)于字符串的運(yùn)算都有哪些呢？我們先文字描述下：

• 字符串1 + 字符串2：用于連接字符串，結(jié)果會(huì)返回包含兩個(gè)字符串的新字符串，如果這其中一個(gè)字符串帶引號(hào)，那么結(jié)果也會(huì)帶引號(hào)，否則就不帶引號(hào)（帶引號(hào)的字符串要位于 + 號(hào)左側(cè)）；
• 字符串1 / 字符串2：返回一個(gè)字符串，這里包含字符串 1 和 字符串 2 ，會(huì)用 / 分隔；
• 字符串1 - 字符串2：返回一個(gè)字符串，這里包含字符串 1 和 字符串 2 ，會(huì)用 - 分隔。

下面我們使用代碼來(lái)舉例看下：

p {
  color: r + 'ed'; // 帶引號(hào)的在加號(hào)右側(cè)，返回一個(gè)不帶引號(hào)的字符串
  color: 'r' + ed; // 帶引號(hào)的在加號(hào)左側(cè)，返回一個(gè)帶引號(hào)的字符串
  color:r + ed; // 返回一個(gè)不帶引號(hào)的字符串
  color: r/ed; // 返回一個(gè)使用 / 分隔的字符串
  color: r-ed; // 返回一個(gè)使用 - 分隔的字符串
}

上面這段代碼會(huì)轉(zhuǎn)換為如下的 CSS 代碼：

p {
  color: red;
  color: "red";
  color: red;
  color: r/ed;
  color: r-ed;
}

同樣此處舉的例子只是為了方便大家感受，實(shí)際應(yīng)用時(shí)可能并不會(huì)寫(xiě)這么多 color 屬性，字符串運(yùn)算可以讓你很方便的拼接一些字符串來(lái)使用。

4.7 布爾運(yùn)算

可能與其他的語(yǔ)言不太相同，Sass 中的布爾運(yùn)算使用的不是運(yùn)算符而是單詞，所以 Sass 中的布爾運(yùn)算是 not 、and 和 or，not 的意思是取反，and 的意思是兩個(gè)都為真則返回真反之則返回假，or 的意思是其中一個(gè)為真則返回真?？吹竭@你可能懂了，這不就是我們常說(shuō)的邏輯非、邏輯與和邏輯或嘛，下面我們舉個(gè)例子來(lái)看下：

{
  a: true and true;
  b: true or false; 
  c: true and false;
  d: not false;
}

那么上面這段代碼在 Sass 中會(huì)轉(zhuǎn)換為：

{
  a: true;
  b: true;
  c: false;
  d: true;
}

布爾運(yùn)算在實(shí)際寫(xiě)樣式的時(shí)候基本是不會(huì)用到的，大家也不會(huì)直接在樣式中應(yīng)用，一般布爾運(yùn)算會(huì)應(yīng)用在 Sass 函數(shù)中。

5. 實(shí)戰(zhàn)經(jīng)驗(yàn)

上面講了這么多，現(xiàn)在該說(shuō)到實(shí)戰(zhàn)了。在實(shí)際的項(xiàng)目開(kāi)發(fā)中，可能最最常用的就是加減乘除的運(yùn)算了，有時(shí)可能會(huì)用到字符串運(yùn)算。在你寫(xiě) CSS 的時(shí)候，相信你一定知道 rem 布局，這個(gè)簡(jiǎn)直太常用了。我們?cè)谧?rem 布局的時(shí)候經(jīng)常會(huì)設(shè)置一個(gè)根元素的字體大小，然后其余所有的像素可能都根據(jù)這個(gè)去計(jì)算，所以為了便于維護(hù)，我把這個(gè)根元素的大小抽離出來(lái)作為一個(gè)變量，然后在每個(gè)元素的樣式中對(duì)這個(gè)變量進(jìn)行運(yùn)算就可以了，同時(shí)呢，我們還可以在動(dòng)畫(huà)中運(yùn)用一些運(yùn)算，我們一起來(lái)看下：

$root: 28;

html {
  font-size: $root+px;
}
p {
  width: (460rem / $root);
  height: (320rem / $root);
}

@keyframes sacle {
  0% {
    width: (800px - $root);
  }
  50% {
    width: 800px - $root * 2;
  }
  100% {
    width: (800px / $root);
  }
}

上面這段代碼我們動(dòng)態(tài)的計(jì)算了 rem 還有動(dòng)畫(huà)中的一些需要的運(yùn)算。而且這樣做的好處是我們可以隨時(shí)按需更改變量而不需要重新把沒(méi)處樣式都再手動(dòng)進(jìn)行更改，這樣就讓項(xiàng)目的代碼更具有擴(kuò)展性并且更易于維護(hù)。它將會(huì)被轉(zhuǎn)換為如下的 CSS 代碼：

html {
  font-size: 28px;
}

p {
  width: 16.4285714286rem;
  height: 11.4285714286rem;
}

@keyframes sacle {
  0% {
    width: 772px;
  }
  50% {
    width: 744px;
  }
  100% {
    width: 28.5714285714px;
  }
}

在我們的項(xiàng)目中，我們會(huì)把 $root 這個(gè)變量抽出來(lái)到專門(mén)維護(hù)變量的文件中，然后供項(xiàng)目中所有的頁(yè)面做運(yùn)算使用。

6. 小結(jié)

本節(jié)教程我們講解了 Sass 中的運(yùn)算以及運(yùn)算的應(yīng)用，我們回憶一下都有哪些運(yùn)算：

在編寫(xiě)樣式的時(shí)候加減乘除運(yùn)算可能會(huì)應(yīng)用的比較多，而字符串運(yùn)算、布爾值運(yùn)算、關(guān)系運(yùn)算在 Sass 函數(shù)中應(yīng)用比較多，后面的章節(jié)我們會(huì)講解 Sass 函數(shù)，而顏色運(yùn)算官方已經(jīng)不推薦大家使用了，取而代之的是顏色函數(shù)，所以這里我們也盡量不要使用顏色運(yùn)算了。

在 CSS 中的某些需要你自己計(jì)算的值你可以嘗試使用 Sass 運(yùn)算來(lái)提升你的開(kāi)發(fā)效率，而且像一些經(jīng)常使用到的運(yùn)算完全可以抽離出來(lái)統(tǒng)一維護(hù)，這樣項(xiàng)目會(huì)更加易于維護(hù)，管理起來(lái)也更清晰！Sass 的運(yùn)算我個(gè)人認(rèn)為是一個(gè)能特別提升開(kāi)發(fā) CSS 效率的擴(kuò)展功能。