Direkt zum Inhalt

Newsletter Serie mit 22 Ratschlägen zum Thema Online Marketing und Inbound Marketing.
Anmelden

 

Sass: Easily generate classes

Generating CSS class names with SASS is quite easy
 

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.

Das könnte Sie auch interessieren

Tags: 
Tags: