Sass運算

加法
在 CSS 中能作運算的，到目前爲止僅有 calc() 函數可行。在 Sass 中，運算只是其基本特性之一。在 Sass 中能夠作各類數學計算。
加法運算是 Sass 中運算中的一種，在變量或屬性中均可以作加法運算。如：

1 .box {
2  width: 20px + 8in;
3 }

編譯出來的 CSS:

1 .box {
2  width: 788px;
3 }

對於攜帶不一樣類型的單位時，在 Sass 中計算會報錯，以下例所示：

1 .box {
2  width: 20px + 1em;
3 }

編譯的時候，編譯器會報錯：「Incompatible units: 'em' and ‘px'.」

 

 

 

減法
Sass的減法運算和加法運算相似

1 $full-width: 960px; 2 $sidebar-width: 200px; 3 .content {
4  width: $full-width - $sidebar-width;
5 }

編譯出來的 CSS 以下：

1 .content {
2  width: 760px;
3 }

一樣的，運算時碰到不一樣類型的單位時，編譯也會報錯

 

 

 

乘法
Sass 中的乘法運算和前面介紹的加法與減法運算還略有不一樣。雖然他也可以支持多種單位（好比 em ,px , %），但當一個單位同時聲明兩個值時會有問題。

1 .box {
2  width:10px * 2px; 
3 }

編譯的時候報「20px*px isn't a valid CSS value.」錯誤信息。
若是進行乘法運算時，兩個值單位相同時，只須要爲一個數值提供單位便可。上面的示例能夠修改爲：

1 .box {
2  width: 10px * 2;
3 }

編譯出來的 CSS:

1 .box {
2  width: 20px;
3 }

Sass 的乘法運算和加法、減法運算同樣，在運算中有不一樣類型的單位時，也將會報錯。以下面的示例：

1 .box {
2  width: 20px * 2em;
3 }

編譯時報「40em*px isn't a valid CSS value.」錯誤信息。

 

 

 

除法
Sass 的乘法運算規則也適用於除法運算。不過除法運算還有一個特殊之處。衆所周知「/」符號在 CSS 中已作爲一種符號使用。所以在 Sass 中作除法運算時，直接使用「/」符號作爲除號時，將不會生效，編譯時既得不到咱們須要的效果，也不會報錯。一塊兒先來看一個簡單的示例：

1 .box {
2  width: 100px / 2; 
3 }

編譯出來的 CSS 以下：

1 .box {
2  width: 100px / 2;
3 }

要修正這個問題，只須要給運算的外面添加一個小括號( )便可：

1 .box {
2  width: (100px / 2); 
3 }

編譯出來的 CSS 以下：

1 .box {
2  width: 50px;
3 }

除了上面狀況帶有小括號，「/」符號會看成除法運算符以外，若是「/」符號在已有的數學表達式中時，也會被認做除法符號。以下面示例：

1 .box {
2  width: 100px / 2 + 2in; 
3 }

編譯出來的CSS：

1 .box {
2  width: 242px;
3 }

當用變量進行除法運算時，「/」符號也會自動被識別成除法，以下例所示：

1 $width: 1000px; 2 $nums: 10; 3 .item {
4  width: $width / 10; 
5 }
6 .list {
7  width: $width / $nums;
8 }

編譯出來的CSS:

1 .item {
2  width: 100px;
3 }
4 .list {
5  width: 100px;
6 }

」/  」符號被看成除法運算符時有如下幾種狀況：

•    若是數值或它的任意部分是存儲在一個變量中或是函數的返回值。
•    若是數值被圓括號包圍。
•    若是數值是另外一個數學表達式的一部分。

1 //SCSS 2 p {
3  font: 10px/8px; // 純 CSS，不是除法運算 4  $width: 1000px;
5  width: $width/2; // 使用了變量，是除法運算 6  width: round(1.5)/2; // 使用了函數，是除法運算 7  height: (500px/2); // 使用了圓括號，是除法運算 8  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算 9 }

編譯出來的CSS：

1 p {
2  font: 10px/8px;
3  width: 500px;
4  height: 250px;
5  margin-left: 9px;
6 }

Sass 的除法運算還有一個狀況。在乘法運算時，若是兩個值帶有相同單位時，作乘法運算時，出來的結果並非咱們須要的結果。但在除法運算時，若是兩個值帶有相同的單位值時，除法運算以後會獲得一個不帶單位的數值。以下所示：

1 .box {
2  width: (1000px / 100px);
3 }

編譯出來的CSS以下：

1 .box {
2  width: 10;
3 }

 

 

 

變量計算
在 Sass 中除了能夠使用數值進行運算以外，還能夠使用變量進行計算。

1 $content-width: 720px; 2 $sidebar-width: 220px; 3 $gutter: 20px; 4 .container {
5  width: $content-width + $sidebar-width + $gutter;
6  margin: 0 auto;
7 }

編譯出來的CSS

1 .container {
2  width: 960px;
3  margin: 0 auto;
4 }

 

 

 

數字運算
在 Sass 運算中數字運算是較爲常見的，數字運算包括前面介紹的：加法、減法、乘法和除法等運算。並且還能夠經過括號來修改他們的運算前後順序。和咱們數學運算是同樣的，

示例：

1 .box {
2  width: ((220px + 720px) - 11 * 20 ) / 12 ; 
3 }

編譯出來的 CSS:

1 .box {
2  width: 60px;
3 }

 

 

 

顏色運算
全部算數運算都支持顏色值，而且是分段運算的。也就是說，紅、綠和藍各顏色分段單獨進行運算。如：

1 p {
2  color: #010203 + #040506;
3 }

計算公式爲 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 而且被合成爲：
如此編譯出來的 CSS 爲：

1 p {
2  color: #050709;
3 }

算數運算也能將數字和顏色值 一塊兒運算，一樣也是分段運算的。如：

1 p {
2  color: #010203 * 2;
3 }

計算公式爲 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 而且被合成爲：

1 p {
2  color: #020406;
3 }

 

 

 

字符運算

1 $content: "Hello" + "" + "Sass!"; 2 .box:before {
3  content: " #{$content} "; 4 }

編譯出來的CSS：

1 .box:before {
2  content: " Hello Sass! ";
3 }

除了在變量中作字符鏈接運算以外，還能夠直接經過 +，把字符鏈接在一塊兒：

1 div {
2  cursor: e + -resize;
3 }

注意，若是有引號的字符串被添加了一個沒有引號的字符串 （也就是，帶引號的字符串在 + 符號左側）， 結果會是一個有引號的字符串。 一樣的，若是一個沒有引號的字符串被添加了一個有引號的字符串 （沒有引號的字符串在 + 符號左側）， 結果將是一個沒有引號的字符串。 例如：

1 p:before {
2  content: "Foo " + Bar;
3  font-family: sans- + "serif";
4 }

編譯出來的 CSS：

1 p:before {
2  content: "Foo Bar";
3  font-family: sans-serif; 
4 }