SASS – Lesson 5 : Conditions and Loops

Conditions

With conditions, it’s possible to check certain information in our SCSS file. For example, if the color is equal to orange, then we define new parameters:

Generated CSS :

Thanks to this condition, it’s possible to change the value of $shadow by setting $color. In this example, we check the value of $color, however, several other comparisons are possible. Discover all the control directives of SASS.

Loops

Loops allow you to repeat an instruction as many times as you want.

Loops @for

Generated CSS :

Loops @while

Generated CSS :

Loops @each

Generated CSS :

This list can be defined in a variable (comparable to arrays in PHP). Each value must be separated by a comma.
Example: $var: puma, sea-slug, egret, salamander;