編程教程Sass 數(shù)字運(yùn)算符
描述
SASS允許諸如加法，減法，乘法和除法的數(shù)學(xué)運(yùn)算。您不能使用不兼容的單位，如px * px或添加數(shù)字與px和em導(dǎo)致生成無效的CSS。因此，如果在CSS中使用無效單位，SASS將顯示錯(cuò)誤。 SASS支持關(guān)系運(yùn)算符，如<，>，<=，> =和等于運(yùn)算符= =，！=。
除法 和 /
SASS允許對(duì)數(shù)字進(jìn)行除法運(yùn)算（/），就像在普通CSS中一樣。您可以在三種情況下使用除法（/）操作
如果值存儲(chǔ)在變量中或由函數(shù)返回。
如果圓括號(hào)在列表之外，值在里面，在這種情況下，值也將被括號(hào)括起來。
如果value是算術(shù)表達(dá)式的一部分。
減法，負(fù)數(shù)和 -
使用SASS可以執(zhí)行一些操作，例如減去數(shù)字（10px - 5px），負(fù)數(shù)（-5），一元取反運(yùn)算符（ - $ myval）或使用標(biāo)識(shí)符（font-size）。在某些情況下，這些是有用的：
你可以使用空格兩邊 - 當(dāng)執(zhí)行數(shù)字減法
你可以在 - 之前使用空格，但不能在負(fù)數(shù)之后或一元否定
你可以在用空格分隔的括號(hào)內(nèi)包含一元否定（5px（ - $ myval））
有一些與 - 相關(guān)的意義，如下所示：
它可以在標(biāo)識(shí)符中使用，如font-size和Sass只允許有效的標(biāo)識(shí)符。
它可以用于兩個(gè)數(shù)字，沒有空格。裝置10-5類似于10-5。
它可以用作負(fù)數(shù)（-5）的開始。
它可以在不考慮空間的情況下使用，如5 - $ myval類似于5 - $ myval。
它可以用作一元否定運(yùn)算符（ - $ myval）。
例子
下面的例子演示了在SCSS文件中使用數(shù)字操作：
<html><head><title>Number Operations</title><linkrel="stylesheet"type="text/css"href="style.css"/><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head><body><divclass="container"><pclass="para1">SASS stands for Syntactically Awesome Stylesheet..</p><h2>Hello...Welcome to Sass</h2><h3>Hello...Welcome to Sass</h3><pclass="para2">Hello...Welcome to Sass</p></div></body></html>
接下來，創(chuàng)建文件style.scss。
style.scss
$size:25px;h2{font-size:$size+5;}h3{font-size:$size/5;}.para1{font-size:$size*1.5;}.para2{font-size:$size-10;}
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時(shí)更新CSS：
sass--watch C:\ruby\lib\sass\style.scss:style.css
接下來執(zhí)行上面的命令，它將自動(dòng)創(chuàng)建style.css文件用下面的代碼：
style.css
h2{font-size:30px;}h3{font-size:5px;}.para1{font-size:37.5px;}.para2{font-size:15px;}
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：
將以上html代碼保存在number_operations.html文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
