css - Sass @each 和@if/else 混合片段？

Question

我是 Sass 的新手，我正在尝试使用这样的 CSS；

.heading-lg { 
font-size: 11.2rem;}

.heading-md { 
font-size: 11.2rem;}

.heading-sm { 
font-size: 11.2rem;}

这是我的 SCSS 代码。但是所有 heading-xx 类都得到 11.2rem。谁能给我指路？非常感谢。

$font-size: 1.6rem;
$heading-size: .8rem;
$heading: lg md sm;
$heading-lg: lg;
$heading-md: md;
$heading-sm: sm;

@each $size in $heading {
    .heading-#{$size} {

        @if $heading-lg==lg {
            font-size: $font-size + $heading-size * (12);
        }
        @else if $heading-md==md {
            font-size: $font-size + $heading-size * (10);
        }
        @else {
            font-size: $font-size + $heading-size * (8);
        }
    }
}

Answer 1

您应该使用 $size 变量而不是 $heading-lg。正如上面的代码，@each 中的 $heading-lg 始终等于 lg，因此导致了您的问题。

@each $size in $heading {
    .heading-#{$size} {

        @if $size==lg {
            font-size: $font-size + $heading-size * (12);
        }
        @else if $size==md {
            font-size: $font-size + $heading-size * (10);
        }
        @else {
            font-size: $font-size + $heading-size * (8);
        }
    }
}