Categories: Sass教程

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; 
}
terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

20 小时 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

1 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

4 周 ago