[英]SCSS: use dynamic variable inside @each
我正在使用 SCSS 循環遍歷每個大小並創建單獨的類。
文件:styles.scss
@import 'variables';
$font-list: xxl xl l m s xs;
@each $size in $font-list {
.font-#{$size} {
font-size: font-#{$size};
}
}
文件:_variable.scss
// Font sizes
$font-xxl: 21px !important;
$font-xl: 18px !important;
$font-l: 16px !important;
$font-m: 14px !important;
$font-s: 12px !important;
$font-xs: 10px !important;
上述代碼的預期結果是:
.font-xxl{
font-size: $font-xxl;
}
.font-xl{
font-size: $font-xl;
}
.font-l{
font-size: $font-l;
}
.font-m{
font-size: $font-m;
}
.font-s{
font-size: $font-s;
}
.font-xs{
font-size: $font-xs;
}
但我得到的實際代碼是:
.font-xxl {
font-size: font-xxl;
}
.font-xl {
font-size: font-xl;
}
.font-l {
font-size: font-l;
}
.font-m {
font-size: font-m;
}
.font-s {
font-size: font-s;
}
.font-xs {
font-size: font-xs;
}
使用 map:
$font-sizes: (
xxl: 21px,
xl: 18px,
l: 16px,
m: 14px,
s: 12px,
xs: 10px
);
$font-list: xxl xl l m s xs;
@each $size in $font-list {
.font-#{$size} {
font-size: map-get($font-sizes, $size) !important;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.