Я новичок в Sass и пытаюсь получить вот такой CSS;

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

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

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

А вот и мой код SCSS. Но все классы заголовка xx получают 11,2 бэр. Кто-нибудь может показать мне дорогу? Большое спасибо.

$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);
        }
    }
}
0
qwer4k 17 Сен 2018 в 01:20

2 ответа

Лучший ответ

Вам следует использовать переменную $size вместо $heading-lg. Как указано выше в вашем коде, $heading-lg в @each всегда равно 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);
        }
    }
}
0
Bendy Zhang 17 Сен 2018 в 01:36

Еще одно хорошее решение - использовать карты: возможно, они более читабельны (потому что вы сразу связываете ключ-значение), и вам не нужно использовать оператор @if внутри вашего цикла @each:

$font-size: 1.6rem;
$heading-size: .8rem;

$heading-list: (
  lg:12,
  md:10,
  sm:8
);

@each $key, $value in $heading-list {
  .heading-#{$key} {
    font-size: $font-size + $heading-size * ($value);
  }
}
0
ReSedano 17 Сен 2018 в 07:03