интерполяция переменных sass в каждом цикле

Question

пытается использовать переменную внутри каждого цикла.Но, похоже, не работает на меня

$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};
    }
}

Answer 1

Сделано так.Он отлично работает с подходом ключ-значение.

$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};
    }
}

Но все же хотите знать, почему мы не можем использовать его следующим образом: - $ font-size - # {$ font}