Updated March 29, 2023
Introduction to SASS if()
SASS provides users with control directives and expressions to use style based on certain conditions. It also lets users apply the same style with variations several times. In this article, we discuss the SASS if() function, which is an in-built function in SASS that is based on the condition and returns only one result from two probable outcomes. The outcome of the if() function depends on either the result is true or false. The output of the function may be referenced to the variable, which may not be specified or is determined further.
The if the expression is useful for evaluating whether a variable exists or something matches. The @if control function accepts an expression from Sass Script and executes its style block if the expression produces anything else than false.
Syntax
if( expression, value1, value2 )for instance: consider the below line,
if( 1 + 1 ==2 , cyan, green);In the above code, 1 + 1 is equal to 2, then the given condition is true; therefore, the result will be cyan. Otherwise, the result will be green.
Working of if() function
The if() function works based on the true or false conditions. If the provided expression is true, the function returns the true value, and the blocks are evaluated. If the expression is false, then the outcome will not be evaluated.
For instance, as shown in the above syntax, the if() function can be defined in the SCSS as shown below:
h2{
color: if( 2 + 2 == 4 , cyan, green);
}
h3{
color: if( 2 + 1 ==3 , cyan, green);
}When you compile the CSS file, we will get the below style sheet:
code>h2 {
color: cyan;
}
h3 {
color: green;
}As shown in the above code, if 2 + 2 is equal to 4, it will display the cyan, and if the outcome is 3, then the result will display a green value.
Examples of SASS if()
Different examples are mentioned below:
Example #1
To run SASS files, you need to install Ruby for executing SASS programs. Create a file with the name sass_if_demo.html with the below code:
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>Now create an scss file with the name sass_if_demo.scss and put the below code.
sass_if_demo.scss
h2{
color: if( 1 + 1 == 3 , cyan, green);
}
h3{
color: if( 1 + 1 ==2 , cyan, green);
}Put the above both two files in the root folder of an installed ruby folder. Now open the command prompt and run the below command to watch the file, communicate it to SASS, and update the CSS file every time the SASS file changes.
sass --watch import_demo.scss: import_demo.cssThe above command will create a CSS file and called as sass_if_demo.css in the same folder where Ruby is installed.
The sass_if_demo.css file includes the below code.
sass_if_demo.css
h2 {
color: green;
}
h3 {
color: cyan;
}Output
Now, execute the html file and open it in the browser, and you will get the below result:
Example #2
Consider the below an html file and save the code as sass_if_demo1.html as shown in the below html code:
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>Now create an scss file with the name sass_if_demo1.scss and put the below code into it:
sass_if_demo1.scss
.myclass {
@if 1 + 1 == 3 { border: 2px dotted; }
@if 3 > 2 { border: 3px dashed; }
@if null { border: 4px double; }
}Compile the code with sass –watch command as shown in the above example. The sass_if_demo1.css file will have the below code:
sass_if_demo1.css
.myclass {
border: 3px dashed;
}Output
Now, execute the html file and open it in the browser, and you will get the below result:
Example #3
Consider the below code and save it with the name as 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>Now create an scss file with the name sass_if_demo1.scss and put the below code into it:
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;
}
}Compile the code with sass –watch command as shown in the above example. The sass_if_demo1.css file will have the below code:
sass_if_demo1.css
css.points li {
background-color: grey;
}
.points {
line-height: 2.5;
}
.points li {
margin: 0.5em 2;
}Output
Now, execute the html file and open it in the browser, and you will get the below result:
Conclusion
So far, we have seen the SASS if() function workflow to provide the flow and control required to create libraries. As the function is in-built in SASS which is used to check whether something is true or false and then produces the correct response. The if() function allows us to verify for a condition and return one of two probable values.
Recommended Articles
This is a guide to SASS if(). Here we discuss the workflow to provide the flow and control along with the examples to implement if() function in SASS. You may also have a look at the following articles to learn more –
