Увеличивайте заголовки и переменные с помощью цикла for, который применяет размер шрифта в scss

Я пытаюсь просмотреть все 6 заголовков и применить размер шрифта через миксин из 6 переменных размера шрифта. Но я продолжаю получать неопределенную переменную. Он не распознает приращение переменной. Я что-то не так делаю или это просто невозможно? В любом случае, в моей голове это кажется достаточно простым. Он является ссылкой на сассмейстер. Спасибо за любую помощь или понимание.

// Переменные

$font-h1: 40px;
$font-h2: 28px;
$font-h3: 24px;
$font-h4: 20px;
$font-h5: 18px;
$font-h6: 14px;

//Миксин

@mixin font-size($size) {
  font-size: $size;  
}

@for $i from 1 through 6 {
  h#{$i} {
    // font-size: #{$i};
    @include font-size( $font-h#{$i} );
  }
}

// Ожидаемый выход

h1 {
    font-size: 40px
} 
etc...

// Фактический вывод

Undefined variable: "$font-h".

sass scss-mixins

11.04.2019 22:38

Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации

Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...

414

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете попробовать реорганизовать свой var и использовать массив или использовать карту fn.

Например:

  $font-h: 40px, 28px, 24px, 20px, 18px, 14px;

  @mixin font-size($size) {
    font-size: $size;  
  }

  @for $i from 1 through length($font-h) {
  $font: nth($font-h, $i);

  h#{$i} {
      @include font-size($font);
    }
  }

11.04.2019 23:13

Ответ принят как подходящий

Я бы выбрал карта, так как он более гибкий, например:

$font-size:(
    h1 : 40px,
    h2 : 28px,
    h3 : 24px,
    h4 : 20px,
    h5 : 18px,
    h6 : 14px
);

@each $header, $size in $font-size {
    #{$header}{ font-size: $size; }
} 




//  Bonus 
//  If you need to apply a font-size to another 
//  element you can get the size using map-get 
.class {
    font-size: map-get($font-size, h3);
}


//  Function and mixin to handle the above
@function font-size($key){
    @return map-get($font-size, $key);
}
@mixin font-size($key){
    font-size: font-size($key); 
}


.class {
    font-size: font-size(h3);  // use it as function
    @include font-size(h3);    // use it as include
}

Спасибо за Ваш ответ. Я буду использовать это.

— 15.04.2019 14:38

12.04.2019 09:20