SCSS, Using a variable in @each loop

[maikelkoopman]

I am trying to use a variable in a @each loop to set the font-size for headings.

Variables:
$h1: 22px;
$h2: 20px;
$h3: 18px;
$h4: 16px;
$h5: 14px;
$h6: 12px;

Then I want to use the variable in the loop. somehow I don’t know how to write it :(

@each $heading in h1, h2, h3, h4, h5, h6 {

    #{$heading} {
      margin: 10px 0;
      line-height: 1.5em;
      font-size: $+#{$heading}; // this is obviously wrong ;)
    }
  }

Does anybody know if this is possible and how it needs to be written?

[Alen]

// Variables
$h1: 22px;
$h2: 20px;
$h3: 18px;
$h4: 16px;
$h5: 14px;
$h6: 12px;
// List of headings
$headings: ( h1: $h1, h2: $h2, h3: $h3, h4: $h4, h5: $h5, h6: $h6 );
// Loop over list of headings
// @each ( $heading : $size )
@each $heading, $size in $headings {
    #{$heading} {
        margin: 10px 0;
        line-height: 1.5em;
        font-size: $size;
    }
}

[maikelkoopman]

Thanks, Allen. I noticed this works only for Sass 3.3.
I just found a way for sass 3.2 (since I am using compass). It is less pretty but it works:

// headings
  #{headings()} {
    margin: 10px 0;
    line-height: 1.5em;
  }

  $headings: h1, h2, h3, h4, h5, h6;
  $size: $h1, $h2, $h3, $h4, $h5, $h6;

  $head-size: zip($headings, $size);

  @each $a in $head-size {
    #{nth($a, 1)} {
      font-size: nth($a, 2);
    }
  }

[Author]

Posts