Functions and Operations

In Sass, if() is a function that can only branch one of two ways based on a condition. You can use it inline, to assign the value of a property:

width: if( $condition, $value-if-true, $value-if-false);

For cases with more than two outcomes, the @if, @else-if, and @else directives allow for more flexibility.

@mixin deck($suit) { @if($suit == hearts || $suit == spades){ color: blue; } @else-if($suit == clovers || $suit == diamonds){ color: red; } @else{ //some rule } }

The mixin above is a good example for how we would want to handle the coloring of a deck of cards based on a suit condition.



Let’s spice up the look of our rainbow by changing the width of a .ray based on whether the element falls on an even or odd number— we can use modulo to determine if something is even or odd. In main.scss, add the following to your loop:

width: if($i % 2 == 0, 300px, 350px); margin-left: if($i % 2 == 0, 0px, 50px);

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Folder Icon

Sign up to start coding

Already have an account?