Sass if()函数
Sass if()函数
Sass内置的if()函数基于条件。它仅从两个可能的结果中返回一个结果。函数的结果取决于结果是对还是错。
语法:
if( expression, value1, value2 )
让我们举个例子来看一下SCSS文件中if()函数的用法。我们有一个名为" simple.html"的HTML文件，其中包含以下代码:
HTML文件: simple.html
<!DOCTYPE html>
<html>
<head>
<title>Sass if() condition example</title>
<link rel="stylesheet" type="text/css" href="simple.css"/>
</head>
<body>
<h2>lidihuo: A solution of all technology.</h2>
</body>
</html>
创建一个名为" simple.scss"的SCSS文件，其代码如下:(错误条件)
文件: simple.scss
h2{
color: if( 1 + 1 == 3 , green , red);
}
将两个文件都放在根文件夹中。
现在，打开命令提示符并运行 watch 命令告诉SASS监视文件并在SASS时更新CSS。文件已更改。
执行以下代码: sass--watch simple.scss: simple.css
它将创建一个名为"
例如:
创建的CSS文件" simple.css"包含以下代码:
注意: 在这里，如果条件为false，则创建的CSS会显示红色，因为SCSS。
现在，执行上述html文件，它将读取CSS值。
输出:
创建真实条件的SCSS文件:
文件: simple.scss
h2{
color: if( 1 + 1 == 2 , green , red);
}
它将创建以下CSS:
输出:
