免費(fèi)AI編程助手
Sass 數(shù)字運(yùn)算符
描述
SASS允許諸如加法，減法，乘法和除法的數(shù)學(xué)運(yùn)算。您不能使用不兼容的單位，如px * px或添加數(shù)字與px和em導(dǎo)致生成無效的CSS。因此，如果在CSS中使用無效單位，SASS將顯示錯誤。 SASS支持關(guān)系運(yùn)算符，如<，>，<=，> =和等于運(yùn)算符= =，！=。
除法 和 /
SASS允許對數(shù)字進(jìn)行除法運(yùn)算（/），就像在普通CSS中一樣。您可以在三種情況下使用除法（/）操作
如果值存儲在變量中或由函數(shù)返回。
如果圓括號在列表之外，值在里面，在這種情況下，值也將被括號括起來。
如果value是算術(shù)表達(dá)式的一部分。
減法，負(fù)數(shù)和 -
使用SASS可以執(zhí)行一些操作，例如減去數(shù)字（10px - 5px），負(fù)數(shù)（-5），一元取反運(yùn)算符（ - $ myval）或使用標(biāo)識符（font-size）。在某些情況下，這些是有用的：
你可以使用空格兩邊 - 當(dāng)執(zhí)行數(shù)字減法
你可以在 - 之前使用空格，但不能在負(fù)數(shù)之后或一元否定
你可以在用空格分隔的括號內(nèi)包含一元否定（5px（ - $ myval））
有一些與 - 相關(guān)的意義，如下所示：
它可以在標(biāo)識符中使用，如font-size和Sass只允許有效的標(biāo)識符。
它可以用于兩個數(shù)字，沒有空格。裝置10-5類似于10-5。
它可以用作負(fù)數(shù)（-5）的開始。
它可以在不考慮空間的情況下使用，如5 - $ myval類似于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>
接下來，創(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文件更改時更新CSS：
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來執(zhí)行上面的命令，它將自動創(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文件，將顯示如下輸出。
更多建議：