Sass if() 函数

Sass 内置的 if() 函数基于条件。它从两种可能的结果中只返回一个结果。该函数的结果取决于结果为真还是假。

语法

让我们看一个例子，看看在 SCSS 文件中使用 if() 函数。我们有一个名为 "simple.html" 的 HTML 文件，其中包含以下代码

HTML 文件：simple.html

创建一个名为 "simple.scss" 的 SCSS 文件，其中包含以下代码：（假条件）

文件：simple.scss

将这两个文件放在根文件夹中。

现在，打开命令提示符并运行 watch 命令，告诉 SASS 监视文件并在 SASS 文件更改时更新 CSS。

执行以下代码：sass --watch simple.scss:simple.css

它将自动在同一目录中创建一个名为“simple.css”的普通 CSS 文件。

例如

创建的 CSS 文件“simple.css”包含以下代码

注意： 这里，创建的 CSS 显示红色，因为 SCSS if 条件为假。

现在，执行上面的 html 文件，它将读取 CSS 值。

输出

为真条件创建一个 SCSS 文件

文件：simple.scss

它将创建以下 CSS

输出