SASS: Generating list of variables from list of classes (and vice versa)

Question

I have list of variables with appended values and corresponding list of classes with same name as variables, like so:

$cold-world: Verdana, sans-serif;
$cream: Verdana, sans-serif;
$fish: Verdana, sans-serif;
$knowledge-god: Verdana, sans-serif;
$run: test, test, Verdana, sans-serif;
$winter-warz: Verdana, sans-serif;

$font-list: $cold-world, $cream, $fish, $knowledge-god, $run, $winter-warz;

$pages: "cold-world", "cream", "fish", "knowledge-god", "run", "winter-warz";

Since both lists are the same I was trying to keep thing DRY and created function that prefixes each class in $pages list with $ symbol. Then I used @each loop to create $font-list

$font-list: (); // initilaze empty list

@function variable($x) {
    @return unquote("$" + $x);
}

@each $page in $pages {
    $font-list: append($font-list, variable($page), comma);
}

Problem is when I try to use generated list in output loop. I'm getting variable name instead of value

@mixin font($font-stack, $stack: 1) {
    font-family: nth($font-stack, $stack);
}

@each $page in $pages {
    .#{$page} {
        @include font(nth($font-list, index($pages, $page)), 1);
        //@include font(variable($page), 1); // same result as above
    }
}

DEMO

I also tried generate variable list from class list using str-slice option (available in SASS 3.3.0) also to no avil. It outputs variable value in place of class name.

$font-list: $cold-world, $cream, $fish, $knowledge-god, $run, $winter-warz;

$pages: ();

@function slice($x) {
  @return str-slice(#{$x},1,100);
}

@each $variable in $font-list {
  $pages: append($pages, slice($variable), comma);
}

DEMO#2

score 1 · Accepted Answer · answered Jan 20 '14 at 13:10

I managed to get result I wanted using nested lists. By creating additional variables inside @each loop code gets pretty neat (and works in both libsass and current sass).

$pages:
"cold-world" font1 sans-serif,
"cream" font2 sans-serif,
"fish" font3 sans-serif,
"knowledge-god" font4 sans-serif,
"run" font5 sans-serif,
"winter-warz" font6 sans-serif;


@mixin font($font-stack, $stack: 1) {
    font-family: nth($font-stack, $stack);
}

@each $page in $pages {

    $class: nth($page, 1);
    $font-stack: ();

  @for $i from 2 through length($page) {
    $font-stack: append($font-stack, nth($page, $i));
  }

    .#{$class} {
        @include font($font-stack, 1);
    }
}

DEMO

SASS: Generating list of variables from list of classes (and vice versa)

1 Answers1