Sass if()函數(shù)
2018-12-30 15:33 更新
描述
基于條件，此內(nèi)置的 if（）函數(shù)僅返回兩個可能結(jié)果中的一個結(jié)果。函數(shù)的結(jié)果可以參考可能未被定義的變量或具有進(jìn)一步的計算。
句法
if( expression, value1, value2 )
例子
以下示例演示如何在SCSS文件中使用 if() 函數(shù):
if_function.html
<html> <head> <title>Control Directives & Expressions</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h2>Welcome to TutorialsPoint</h2> </body> </html>
接下來，創(chuàng)建文件 style.scss 。
style.scss
h2{
color: if( 1 + 1 == 2 , green , red);
}
您可以通過使用以下命令讓SASS查看文件并在SASS文件更改時更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來執(zhí)行上面的命令，它將用下面的代碼自動創(chuàng)建 style.css 文件:
style.css
h2 {
color: green; }
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
將上述html代碼保存在 if_function.html 文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
以上內(nèi)容是否對您有幫助：
更多建議：