Question

我正在使用@for循环创建一堆标题样式，但我无法使用变量名称，如下所示：

// Some variables (these work fine)
$h1-size: 3em;
$h2-size: 2em;
$h3-size: 1.6em;
etc...

// My loop
@for $i from 1 through 6 {
    h#{$i} {  
        color: #333;
        font-size: $h#{$i}-size; // DOESN'T WORK!
    } 
}

循环有效 - 但仅当我删除关于font-size的部分时。我可以指向这样的动态构造变量吗？

Answer 1

你不能这样做，也许不应该这样做。好消息：即将推出的3.3版本将引入一种映射类型。

// Some variables (these work fine)
$header-info: (
    1: (size: 3em),
    2: (size: 2em),
    3: (size: 1.6em),
);

@for $i from 1 through 6 {
    h#{$i} {  
        color: #333;
        font-size: map-get(map-get($header-info, $i), size);
    } 
}

Answer 2

我已经调查了这一堆，似乎没有找到支持它的文档中的任何内容。我能想到的最好的解决方法是：

// First, make sure you've got all your variables declared
$h1-size: 3em;
$h2-size: 2em;
etc...

// Then, make a list of the variable names
$sizelist: $h1-size $h2-size $h3-size $h4-size $h5-size $h6-size; 

// Then, use the SASS nth list function. 
@for $i from 1 through 6 {
    h#{$i} {  
        font-size: nth($sizelist, $i);
    } 
}

这将编译为：

h1 {
    font-size: 3em;
}
h2 {
    font-size: 2em;
}
etc...

尝试使用SASS引用动态命名的变量

2 个答案: