2014-01-20 3 views
0

у меня есть список переменных с прилагаемыми значениями и соответствующим список классов с таким же именем, как переменные, как так:SASS: Создание списка переменных из списка классов (и наоборот)

$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"; 

Поскольку в обоих списках то же самое я пытался сохранить вещь DRY и созданную функцию, которая префиксарует каждый класс в списке $pages с символом $. Тогда я использовал @each цикл для создания $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); 
} 

Проблема заключается в том, когда я пытаюсь использовать сгенерированный список в выходном контуре. Я получаю имя переменной вместо значения

@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

Я также пытался генерировать список переменных из списка классов, используя str-slice вариант (доступен в SASS 3.3.0) также не AVIL. Он выводит значение переменной вместо имени класса.

$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

ответ

0

мне удалось получить результат, я хотел с помощью nested lists. Создавая дополнительные переменные внутри @each, код цикла становится довольно аккуратным (и работает как в libsass, так и в текущей 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

Смежные вопросы