trying to use variable inside each loop. But doesn't seem like working for me
$font-size-40: .5rem;
$font-size-50: .625rem;
$font-size-60: .75rem;
$fonts: 40 50 60;
@each $font in $fonts {
.font-size-#{$font} {
font-size: $font-size-#{$font};
}
}
Made it this way. Its working fine with key value approach.
$font-size-40: .5rem;
$font-size-50: .625rem;
$font-size-60: .75rem;
$fonts: (
'40': $font-size-40,
'50': $font-size-50,
'60': $font-size-60,
);
@each $font, $prop in $fonts {
.font-size-#{$font} {
font-size: #{$prop};
}
}
But still want to know why we cant use it like:- $font-size-#{$font}
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.