Trending October 2023 # Working And Examples To Implement If() Function In Sass # Suggested November 2023 # Top 18 Popular

You are reading the article Working And Examples To Implement If() Function In Sass updated in October 2023 on the website Phuhoabeautyspa.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Working And Examples To Implement If() Function In Sass

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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 ) 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:

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

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.css

The 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; }

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

various stream people or candidates to upgrade their

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 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

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.