SASS if()简介
SASS为用户提供了控制指令和表达式，以根据某些条件使用样式。它还可以让用户多次应用同一风格的变化。在这篇文章中，我们讨论SASS的if()函数，它是SASS的一个内置函数，基于条件，从两个可能的结果中只返回一个结果。if()函数的结果取决于结果是真还是假。函数的输出可以引用到变量，变量可以不指定，也可以进一步确定。
if表达式对于评估一个变量是否存在或某些东西是否匹配很有用。@if控制函数接受来自Sass Script的表达式，如果表达式产生的结果不是false，则执行其样式块。
语法
if( expression, value1, value2 )
例如：考虑下面这一行。
if( 1 + 1 ==2 , cyan, green);
在上面的代码中，1+1等于2，那么给定的条件是真的；因此，结果将是青色。否则，结果将是绿色。
if()函数的工作原理
if()函数基于真或假的条件而工作。如果提供的表达式为真，则该函数返回真值，并对块进行评估。如果表达式是假的，那么结果将不会被评估。
例如，如上面的语法所示，if()函数可以在SCSS中定义为如下所示。
h2{
color: if( 2 + 2 == 4 , cyan, green);
}
h3{
color: if( 2 + 1 ==3 , cyan, green);
}
当你编译这个CSS文件时，我们会得到下面的样式表。
h2 {
color: cyan;
}
h3 {
color: green;
}
如上面的代码所示，如果2+2等于4，将显示青色，如果结果是3，那么结果将显示绿色的数值。
SASS if()的例子
下面提到不同的例子。
例子#1
要运行SASS文件，你需要安装Ruby来执行SASS程序。 创建一个名为sass_if_demo.html的文件，代码如下。
sass_if_demo.html
<!DOCTYPE html>
<html>
<head>
<title> SASS if() function example </title>
<link rel="stylesheet" type= "text/css" href= "sass_if_demo.css"/>
</head>
<body>
<h2> Hello World ... !!! </h2>
<h3> Welcome to EDUCBA ... !!! </h3>
</body>
</html>
现在创建一个scss文件，名称为sass_if_demo.scss，并放入以下代码。
sass_if_demo.scss
h2{
color: if( 1 + 1 == 3 , cyan, green);
}
h3{
color: if( 1 + 1 ==2 , cyan, green);
}
将上述两个文件放在已安装的ruby文件夹的根目录下。现在打开命令提示符，运行下面的命令来观察文件，将其传达给SASS，并在每次SASS文件变化时更新CSS文件。
sass --watch import_demo.scss: import_demo.css
上述命令将在安装Ruby的同一文件夹中创建一个CSS文件，并称为sass_if_demo.css。
sass_if_demo.css文件包括以下代码。
sass_if_demo.css
h2 {
color: green;
}
h3 {
color: cyan;
}
输出
现在，执行html文件并在浏览器中打开它，你会得到以下结果。
例子 #2
考虑下面的一个html文件，并将代码保存为sass_if_demo1.html，如下面的html代码所示。
Sass_if_demo1.html
<!DOCTYPE html>
<html>
<head>
<title> SASS @if Directive </title>
<link rel= "stylesheet" type= "text/css" href= "sass_if_demo1.css"/>
</head>
<body>
<div class= "container">
<h2> Welcome to EDUCBA </h2>
<span class= "myclass"> Online teaching providing server which helps
various stream people or candidates to upgrade their
knowledge respective to their domain. </span>
</div>
</body>
</html>
现在创建一个scss文件，名称为sass_if_demo1.scss，并将以下代码放入其中。
sass_if_demo1.scss
.myclass {
@if 1 + 1 == 3 { border: 2px dotted; }
@if 3 > 2 { border: 3px dashed; }
@if null { border: 4px double; }
}
用sass -watch命令编译该代码，如上例所示。sass_if_demo1.css文件将有以下代码。
sass_if_demo1.css
.myclass {
border: 3px dashed;
}
输出
现在，执行该html文件并在浏览器中打开，你将得到以下结果。
例子 #3
考虑一下下面的代码并将其保存为sass_if_demo3.html
sass_if_demo3.html
<!DOCTYPE html>
<html>
<head>
<title> SASS @if function </title>
<link rel= "stylesheet" type= "text/css" href= "sass_if_demo2.css"/>
</head>
<body>
<div class= "container">
<h2> Welcome to EDUCBA </h2>
<ul class= "points">
<li> This is first paragraph... </li>
<li> This is first paragraph... </li>
<li> This is first paragraph... </li>
</ul>
</div>
</body>
</html>
现在创建一个scss文件，名称为sass_if_demo1.scss，并将以下代码放入其中。
sass_if_demo3.scss
@mixin item-styles($condition) {
$color: if($condition, grey, green);
.points li {
background-color: $color;
}
}
@include item-styles(true);
.points {
line-height: 2.5;
li {
margin: 0.5em 2;
}
}
如上例所示，用sass -watch命令编译代码。sass_if_demo1.css文件将有以下代码。
sass_if_demo1.css
.points li {
background-color: grey;
}
.points {
line-height: 2.5;
}
.points li {
margin: 0.5em 2;
}
输出
现在，执行该html文件并在浏览器中打开，你将得到以下结果。
结论
到目前为止，我们已经看到了SASS if()函数的工作流程，以提供创建库所需的流程和控制。由于该函数是内置在SASS中的，用于检查某些东西是真的还是假的，然后产生正确的响应。if()函数允许我们验证一个条件并返回两个可能的值中的一个。
