Learn
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.
Instructions
1.
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.
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.