I am using SCSS to loop over each size and create individual classes.
File: styles.scss
@import 'variables';
$font-list: xxl xl l m s xs;
@each $size in $font-list {
.font-#{$size} {
font-size: font-#{$size};
}
}
File: _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;
Expected result of above code is:
.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;
}
But the actual code I get is:
.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;
}
Use a 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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.