<分区>
<分区>
我正在使用 @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!
}
}
循环有效——但前提是我删除了关于字体大小的部分。我可以指向这样一个动态构造的变量吗？
最佳答案
你不能这样做，而且可能也不应该这样做。好消息:即将发布的 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);
}
}
关于css - 尝试使用 SASS 引用动态命名的变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19443882/
相关文章：
jquery - 使用 css/scss 或 js 动态实现颜色效果不透明度/渐变？
javascript - 如何覆盖 Material UI 工具提示内联样式？
javascript - 如何更改 Bootstrap Accordion 的背景？
css - Google Web Font 没有在 Angular 中使用？
html - Arial 字体只用大写字母间距做一些奇怪的事情
javascript - Swiper Slider - 带有多行幻灯片的无限循环
google-chrome - CSS盒模型问题: box-sizing + 100% height + border + inline-block