Sass @each Rules

Last Updated:

Sass @each Rules

Sass @each rules is used to loop through elements in a list or each pair in a map.

Sass @each rules is mostly used for repetitive styles that only have a few variations between them.

Sass @each Rules using 'List'

In the following example, we will loop through a list.

Example

SASS TO CSS CONVERTER
$sizes: 40px, 60px, 80px; @each $size in $sizes { .icon-#{$size} { font-size: $size; height: $size; width: $size; } }

Syntax

@each variable in expression { // code };

Sass @each Rules using 'Map'

In the following example, we will loop through a map.

Example

SASS TO CSS CONVERTER
$entities: ("one": "\000A7", "two": "\02100", "three": "\02105"); @each $name, $entity in $entities { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $entity; } }

Share this Page

Meet the Author