Sass 數(shù)字運(yùn)算符
描述
SASS允許諸如加法，減法，乘法和除法的數(shù)學(xué)運(yùn)算。您不能使用不兼容的單位，如px * px或添加數(shù)字與px和em導(dǎo)致生成無(wú)效的CSS。因此，如果在CSS中使用無(wú)效單位，SASS將顯示錯(cuò)誤。 SASS支持關(guān)系運(yùn)算符，如<，>，<=，> =和等于運(yùn)算符= =，！=。
除法 和 /
SASS允許對(duì)數(shù)字進(jìn)行除法運(yùn)算（/），就像在普通CSS中一樣。您可以在三種情況下使用除法（/）操作
如果值存儲(chǔ)在變量中或由函數(shù)返回。
如果圓括號(hào)在列表之外，值在里面，在這種情況下，值也將被括號(hào)括起來(lái)。
如果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ù)字，沒(méi)有空格。裝置10-5類(lèi)似于10-5。
它可以用作負(fù)數(shù)（-5）的開(kāi)始。
它可以在不考慮空間的情況下使用，如5 - $ myval類(lèi)似于5 - $ myval。
它可以用作一元否定運(yùn)算符（ - $ myval）。
例子
下面的例子演示了在SCSS文件中使用數(shù)字操作：
<html> <head> <title>Number Operations</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <p class="para1">SASS stands for Syntactically Awesome Stylesheet..</p> <h2>Hello...Welcome to Sass</h2> <h3>Hello...Welcome to Sass</h3> <p class="para2">Hello...Welcome to Sass</p> </div> </body> </html>
接下來(lái)，創(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; }
您可以通過(guò)使用以下命令讓SASS查看文件，并在SASS文件更改時(shí)更新CSS：
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來(lái)執(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文件中。
在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。
更多建議：