Menu
I'd like to set a SASS variable using inline IF's similar to how its done in PHP or Javascript
Is something like this possible?
$myVar: ($something >= 10 ? true : false);
I'm aware of @if control directives but I want to use a shorter inline syntax.
673
In SASS we can make use of the if-else statement, and even else-if , just as we can do in programming languages.
The @if rule is written @if <expression> { ... } , and it controls whether or not its block gets evaluated (including emitting any styles as CSS). 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.
The @if directive executes a set of statements a single time based on a Boolean expression. If, on the other hand, you want to execute the statements multiple times, but still control their execution based on a condition, you can use the @while directive.
Sass does support of conditional (ternary) operator or one line if statement as it works in languages like Javascript or PHP.
$variable: if(condition, result-when-true, result-when-false);
Article about improved if and what's new in Sass 3.3.
P.S. Before Sass 3.3 it did not work as it should. Issue in Sass repo.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
