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

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.

Or sign up using:

Already have an account?