Sass 運算

1. 前言

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

2. 什么是 Sass 運算？

運算從我們小時候就開始學習了，那在 Sass 中的運算是什么呢？
在我們寫樣式的時候，很多場景我們是需要用到計算的，而一般我們都是通過 javascript 來計算，CSS3 中也提供了用于運算的函數 calc() ，可能在工作中你使用過這個函數用來計算長度值，能用到的地方也非常有限。而在 Sass 中，擴展出了很多計算方法，使得你不止是可以計算長度值，還能做一些關系運算甚至顏色值的運算等等。這使我們可以把運算應用于更多的場景，來解決更復雜的問題，運算也是 Sass 的基本特性之一，下面我們一起來學習它～

3. 語法示例

下面我們舉幾個簡單的示例來感受下 Sass 的運算：

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

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

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

此時你可能不是很理解，沒關系，下面我們開始逐一講解～～

4. 使用場景

這部分我們將詳細講解 Sass 運算中的：

• 數字運算

• 圓括號

• 除法運算

• 關系運算

• 顏色運算

• 字符串運算

• 布爾運算

4.1 數字運算

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

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

上面這段代碼轉換成 CSS 為：

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

上面我們對 Sass 數值運算的加減乘和模運算做了演示，在 Sass 的數字運算中還有一個需要特別注意的：減法運算符兩邊需要加空格或者都不加空格，也就是說運算符的兩邊是對稱的；為什么要這樣呢？因為減法運算符 - 不僅僅表示減法，對于負數或者一元否定則只需要在其前面加空格就好，也就是說這個標識符還可以表示負數和一元否定；我們舉個例子來看下：

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

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

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

我們可以看到上面的代碼，如果你只在 - 標識符前面加了空格，其兩邊不對稱是不會對數值進行運算的，所以這個在你寫代碼的過程中一定要注意！

4.2 圓括號

在講除法運算之前，一定要先講一下這個圓括號 () ，圓括號和數學運算中一樣，可以來控制運算順序，這個我們從小就學過，在 Sass 運算中你同樣可以使用它來控制運算順序。

另外就是如果你直使用除法運算符， Sass 會把這當成一個分隔符來處理，但如果你是寫在圓括號內就可以被當作除法操作處理了，這也是圓括號在 Sass 中的另外一個作用！

4.3 除法運算

在 CSS 中，你要知道 / 這個標識符并不是代表除法的，一些 CSS 的屬性值是支持使用 / 來分隔的，所以在 Sass 中直接使用 / 也是會當成分隔符來處理。但是呢，在以下情況下，Sass 將會把 / 視為除法運算：

• 運算符前后的值存儲在變量中或由函數返回
• 運算符和前后的值被圓括號所包裹
• 值是另外一個表達式的一部分

下面我們來舉例看一下：

$one: 20px / 2;
$two: 10px;
p {
  width: 200px + 100px / 10; // 值是另外一個運算表達式的一部分
  font-size: $one; // 前后的值存儲在變量中或由函數返回
  border-width: $two / 5; // 前后的值存儲在變量中或由函數返回
  height: (800px / 2); // 被圓括號所包裹
  max-width: 800px / 2; // 會被當作分隔符來處理，而不是除法運算
}

上面這段 Sass 代碼我對使用 / 的情況進行了注釋，那么它轉換為 CSS 代碼是：

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

上面我們看到了 Sass 除法運算的使用，還有一種情況是：假如我在兩個變量之間使用 / 標識符，而且我又不想對這兩個變量進行除法運算，我只是想對這兩個變量的值進行分隔而已，那該怎么辦呢？那我們需要使用插值 #{} 來將兩個變量包裹住即可，關于插值以后的章節會有講解，這里我們先看一下如何做：

$one: 20px;
$two: 10;
p {
  width: $one / $two; // 沒有使用插值，會對變量值進行除法運算
  height: #{$one} / #{$two}; // 使用插值，不會進行除法運算
}

上面這段使用插值的代碼將會轉換為如下的 CSS 代碼：

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

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

4.4 關系運算

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

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

在上面這個例子中，width 屬性的值是沒有布爾類型的，我這里這么舉例子是為了讓大家可以更直觀的感受，一般關系運算不會直接應用于樣式表中，在 Sass 的函數中應用的比較多。那么上面這段代碼轉換成 CSS 如下：

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

到這里你應該了解 Sass 中的關系運算了，切記我這里的代碼舉例只是為了讓大家直觀的感受，實際情況下并不會這么寫。另外在 Sass 中使用相等運算符去做比較的時候，對于數字類型，數字具有相同的值和相同的單位，或者在單位之間轉換時它們的值相等，則它們是相等的；對于字符串類型，具有相同內容的未加引號和帶引號的字符串被認為是相等的；對于顏色類型，具有相同的紅色、綠色、藍色和alpha值，則顏色是相等的；

4.5 顏色運算

What ？這個一眼看上去可能會感覺很"另類"，顏色要怎么運算呢？下面我們舉個例子看一下：

body {
  color: #020304 + #050203;
}

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

body {
  color: #070507;
}

上面我們講了顏色運算，但是 Sass 官方給出了明確的說明：不推薦使用顏色運算，而使用顏色函數。什么原因呢？因為 Sass 顏色運算所產生出來的色值可能和你感知的并不一致，所以不推薦使用。如果你使用了的話， Sass 也是支持的，但是會給出警告，強烈建議用戶避免使用顏色運算！所以我們的教程里只是做了個演示，你可以了解下，但在實際開發中不推薦使用顏色運算，可以使用顏色函數來實現你的需求！

4.6 字符串運算

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

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

下面我們使用代碼來舉例看下：

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

上面這段代碼會轉換為如下的 CSS 代碼：

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

同樣此處舉的例子只是為了方便大家感受，實際應用時可能并不會寫這么多 color 屬性，字符串運算可以讓你很方便的拼接一些字符串來使用。

4.7 布爾運算

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

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

那么上面這段代碼在 Sass 中會轉換為：

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

布爾運算在實際寫樣式的時候基本是不會用到的，大家也不會直接在樣式中應用，一般布爾運算會應用在 Sass 函數中。

5. 實戰經驗

上面講了這么多，現在該說到實戰了。在實際的項目開發中，可能最最常用的就是加減乘除的運算了，有時可能會用到字符串運算。在你寫 CSS 的時候，相信你一定知道 rem 布局，這個簡直太常用了。我們在做 rem 布局的時候經常會設置一個根元素的字體大小，然后其余所有的像素可能都根據這個去計算，所以為了便于維護，我把這個根元素的大小抽離出來作為一個變量，然后在每個元素的樣式中對這個變量進行運算就可以了，同時呢，我們還可以在動畫中運用一些運算，我們一起來看下：

$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);
  }
}

上面這段代碼我們動態的計算了 rem 還有動畫中的一些需要的運算。而且這樣做的好處是我們可以隨時按需更改變量而不需要重新把沒處樣式都再手動進行更改，這樣就讓項目的代碼更具有擴展性并且更易于維護。它將會被轉換為如下的 CSS 代碼：

html {
  font-size: 28px;
}

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

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

在我們的項目中，我們會把 $root 這個變量抽出來到專門維護變量的文件中，然后供項目中所有的頁面做運算使用。

6. 小結

本節教程我們講解了 Sass 中的運算以及運算的應用，我們回憶一下都有哪些運算：

在編寫樣式的時候加減乘除運算可能會應用的比較多，而字符串運算、布爾值運算、關系運算在 Sass 函數中應用比較多，后面的章節我們會講解 Sass 函數，而顏色運算官方已經不推薦大家使用了，取而代之的是顏色函數，所以這里我們也盡量不要使用顏色運算了。

在 CSS 中的某些需要你自己計算的值你可以嘗試使用 Sass 運算來提升你的開發效率，而且像一些經常使用到的運算完全可以抽離出來統一維護，這樣項目會更加易于維護，管理起來也更清晰！Sass 的運算我個人認為是一個能特別提升開發 CSS 效率的擴展功能。