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

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!
    } 
}

循环有效——但前提是我删除了关于字体大小的部分。我可以指向这样一个动态构造的变量吗？

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...