Sass @if Rules
You are Here:
Sass @if Rules
Sass @if rules controls whether or not to evaluate a block. The expression usually returns either true or false—if the expression returns true, the block is evaluated, and if the expression returns false it's not.
Example
SASS TO CSS CONVERTER
p{
@if 1 < 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
Syntax
@if expression{
// if block
};
Real World Example
The following example will clearly define the scenario to use @if rules.
Example
SASS TO CSS CONVERTER
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: $size / 2;
}
}
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}
Reminder
Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Sass.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
