<分区>
<分区>
我有带有附加值的变量列表和与变量同名的相应类列表，如下所示:
$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";
因为两个列表是相同的，所以我试图让事情保持干燥，并创建了一个函数，该函数在 $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
}
}
我还尝试使用 str-slice 选项(在 SASS 3.3.0 中可用)从类列表生成变量列表，但也没有成功。它输出变量值代替类名。
$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);
}
最佳答案
我设法使用 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);
}
}
关于css - SASS:从类列表生成变量列表(反之亦然)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21234296/