Sass @for Rules

Last Updated:

Sass @for Rules

Sass @for Rules can execute a block of code for the specified number of times.

Sass @for Rules using 'through'

If through (in @for Rules) is used, the final number is included.

In the following example, the @for Rules will execute the block of code for '3 times'.

Example

SASS TO CSS CONVERTER
$base-color: #036; @for $i from 1 through 3 { ol:nth-child(3n + #{$i}) { color: lighten($base-color, $i * 5%); } }

Syntax

@for <variable> from <expression> through <expression>{ // code }; // or @for <variable> from <expression> to <expression>{ // code };

Sass @for Rules using 'to'

If to (in @for Rules) is used, the final number is excluded.

In the following example, the @for Rules will execute the block of code for '2 times'.

Example

SASS TO CSS CONVERTER
$base-color: #036; @for $i from 1 to 3 { ol:nth-child(3n + #{$i}) { color: lighten($base-color, $i * 5%); } }

Share this Page

Meet the Author