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() functionThe 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 #1To 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.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; }Now, execute the html file and open it in the browser, and you will get the below result:
Example #2Consider 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 #3Consider 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:
ConclusionSo 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 ArticlesThis 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 –
You're reading Working And Examples To Implement If() Function In Sass
Update the detailed information about Working And Examples To Implement If() Function In Sass on the Phuhoabeautyspa.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!