Sass if() function
The Sass built-in if() function is based on the condition. It returns only one result from two possible outcomes. The result of the function depends on either the outcome is true or false.
Syntax:
Let’s take an example to see the use of if() function in the SCSS file. We have an HTML file named “simple.html” having the following code:
HTML file: simple.html
Create a SCSS file named “simple.scss”, having the following code: (false condition)
File: simple.scss
Put the both file inside the root folder.
Now, open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.
Execute the following code: sass –watch simple.scss:simple.css
It will create a normal CSS file named “simple.css” in the same directory automatically.
For example:
The created CSS file “simple.css” contains the following code:
Note: Here, the created CSS shows the red color because SCSS if condition is false.
Now, execute the above html file, it will read the CSS value.
Output:
Create a SCSS file for true condition:
File: simple.scss
It will create the following CSS:
Output:
