Tutorial by Examples

The @while directive will loop over a block of code until the condition specified becomes false. In the following example, this loop will run until $font-size <= 18 while incrementing the value for $font-size by 2. $font-size: 12; @while $font-size <= 18 { .font-size-#{$font-size} { ...

The @for directive allows you to loop through some code for a set amount of iterations and has two forms: @for <var> from <start> through <end> {} @for <var> from <start> to <end> {} The difference in the two forms is the through and the to; the through key...

The @if control directive evaluates a given expression and if it returns anything other than false, it processes its block of styles. Sass Example $test-variable: true !default =test-mixin @if $test-variable display: block @else display: none .test-selector +test-mixin ...

The @each directive allows you to iterate through any list or map. It takes the form of @each $var or <list or map> {} where $var can be any variable name and <list or map> can be anything that returns a list or map. In the following example, the loop will iterate through the $authors l...

In the below example value in map $color-array is treated as list of pairs. SCSS Input $color-array:( black: #4e4e4e, blue: #0099cc, green: #2ebc78 ); @each $color-name, $color-value in $color-array { .bg-#{$color-name} { background: $color-value; } } ...