Sass - if() 函式

說明

此內建if()函式基於條件，僅在兩個可能結果中返回一個結果。函式的結果可以參考可能未定義的變數或進一步進行運算。

語法

if( expression, value1, value2 )

示例

以下示例展示了在 SCSS 檔案中使用if()函式 −

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>

接下來，建立檔案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

接下來，執行上述命令；它將自動建立style.css檔案，程式碼如下 −

style.css

h2 {
   color: green; 
}

輸出

讓我們執行以下步驟，看看上面給出的程式碼是如何工作的 −

將上述給出的 html 程式碼儲存在if_function.html檔案中。
在瀏覽器中開啟此 HTML 檔案，顯示如下輸出。

sass_control_directives_expressions.htm

列印頁面

上一個

下一個