Sass怎樣進(jìn)行除（/）運(yùn)算？

Sass支持?jǐn)?shù)字的加（+）、減（-）、乘（）、除（/）和取余（%）等運(yùn)算，如果必要時(shí)會(huì)在不同單位間進(jìn)行值的轉(zhuǎn)換。示例代碼如下。

p { width: 1in + 8pt;
}

上述代碼編譯后的結(jié)果如下。

p { width: 1.111in; 
}

上述代碼中，將8pt轉(zhuǎn)換為lin后的值為1.111in。其中，pt全稱為point，是一個(gè)自然界的長(zhǎng)度單位，1in = 72pt。

在學(xué)習(xí)了不同單位間轉(zhuǎn)換值之后，下面以“/”運(yùn)算符號(hào)為例講解Sass元素的內(nèi)容。

“/”符號(hào)在CSS中通常起到分隔數(shù)字的用途，而在Sass中同時(shí)也賦予了“/”除法運(yùn)算的功能，但兩者并不會(huì)沖突。也就是說，如果“/”在Sass中把兩個(gè)數(shù)字分隔，編譯后的CSS文件中也是同樣的作用。

下面通過代碼演示“/”符號(hào)的使用方式。

p {
 font: 10px/8px;
 $width: 1000px;
 width: $width/2;
 height: (500px/2); 
 margin-left: 5px + 8px/2px; 
}

上述代碼編譯后的結(jié)果如下。

p {
 font: 10px/8px;
 width: 500px;
 height: 250px;
 margin-left: 9px; 
}

上述代碼中，font編譯后的結(jié)果不變，這是因?yàn)闆]有被圓括號(hào)包裹；width編譯后的結(jié)果為500px，這是$width變量除以2計(jì)算后的結(jié)果，因?yàn)?width變量的值提前定義為1000px；height編譯后的結(jié)果為250px，這是被圓括號(hào)包裹的500px/2計(jì)算后的結(jié)果；margin-left編譯后的結(jié)果為9px；這是因?yàn)椤?px/2px”作為了算數(shù)表達(dá)式的一部分，并且計(jì)算后結(jié)果為4px，然后，再通過“+”符號(hào)與前一個(gè)值進(jìn)行加法運(yùn)算，所以最終得到的結(jié)果為9px。

如果需要使用變量，同時(shí)又要確保“/”不做除法運(yùn)算而是完整地編譯到CSS文件中，只需要用#{}插值語句將變量包裹。示例代碼如下。

p {
 $font-size: 12px;
 $line-height: 30px;
 font: #{$font-size}/#{$line-height};
}

上述代碼編譯后的結(jié)果如下。

p {
 font: 12px/30px;
 }

除了數(shù)字運(yùn)算之外，關(guān)系運(yùn)算符<、>、<=、>=也可以用于數(shù)字的運(yùn)算，所有數(shù)據(jù)類型均支持相等（==）或不等（!=）運(yùn)算。此外，每種數(shù)據(jù)類型也有其各自支持的運(yùn)算方式。關(guān)于更多運(yùn)算符號(hào)的使用，讀者可以參考Sass官網(wǎng)進(jìn)行學(xué)習(xí)。

猜你喜歡：

什么是Sass？Sass的優(yōu)勢(shì)有哪些？

Sass語言怎樣聲明變量和引用變量？

什么是數(shù)據(jù)庫技術(shù)？數(shù)據(jù)庫技術(shù)簡(jiǎn)介

Scala算術(shù)操作符重載怎樣使用？

黑馬程序員web前端與移動(dòng)開發(fā)課程