Sass: Easily generate classes

Generating CSS class names with SASS is quite easy
Sass: Easily generate classes

Since SASS < v.3.2 supports only basic array handling eg. no automatic key, value handling, you have to help yourself:

$font-size-tiny: rem-calc(11);
$font-size-small: rem-calc(13);
$font-size-normal: rem-calc(14);
$font-size-big: rem-calc(16);
$font-size-huge: rem-calc(18);

$font-sizes: "tiny" $font-size-tiny, "small" $font-size-small, "normal" $font-size-normal, "big" $font-size-big, "huge" $font-size-huge;
@each $size in $font-sizes {
  $key: nth($size, 1);
  $value: nth($size, 2);
  .font-size-#{$key} {
    font-size: $value;


This snippet will generate you ".font-size-tiny", ".font-size-small" ... class names.

Neuen Kommentar hinzufügen

Ihr Experte

Gründer NETNODE AG, Digital Consultant