Sass if()函數(shù)
描述
基于條件,此內(nèi)置的if()函數(shù)僅返回兩個可能結(jié)果中的一個結(jié)果。函數(shù)的結(jié)果可以參考可能未被定義的變量或具有進一步的計算。
句法
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文件,將顯示如下輸出。