Цикл @for в миксине в precss или sass

У меня есть отличный цикл for в моей таблице стилей precss. Я хотел бы преобразовать его в миксин, где я могу передать начальные значения для $ size (размер шрифта) и $ spacing (буквенный интервал) для разных медиа-запросов. Я не могу заставить переменные увеличиваться по мере прохождения цикла, когда я вызываю его из миксина. Он отлично работает из таблицы стилей

/*--adds .4 rem to each heading fz and character spacing 1-6---*/
$size: 1.8rem;
$spacing: 7px;
@for $i from 6 through 1 {
    h$i {
        font-size: resolve($size);
        letter-spacing: resolve($spacing);
        @extend %heading;
      }
        $size: $size + .4rem;
        $spacing: $spacing * 1.2;
    }

for-loop css sass postcss mixins
person Kristin Yetter    schedule 18.02.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Ваш текущий код близок к тому, чтобы работать как миксин, когда он заключен в объявление @mixin в SCSS. Единственная необходимая настройка — вывод $i в селекторе с помощью #{$variable}

Вход СКСС:

%heading{
  /* heading properties */
  color: #999;
  font-family: sans-serif;
}

@mixin headingSize($size: 1.8rem, $spacing: 7px){
  @for $i from 6 through 1{
    h#{$i}{
      @extend %heading;
      font-size: $size;
      letter-spacing: $spacing;
    }
    $size: $size + .4rem;
    $spacing: $spacing * 1.2;
  }
}

@include headingSize($size: 2rem, $spacing: 10px);

В этом примере ваши исходные переменные $size и $spacing используются в качестве параметров по умолчанию в миксине.

Вот пример JSFiddle в действии.

Вывод CSS:

h6, h5, h4, h3, h2, h1 {
  /* heading properties */
  color: #999;
  font-family: sans-serif;
}

h6 {
  font-size: 2rem;
  letter-spacing: 10px;
}

h5 {
  font-size: 2.4rem;
  letter-spacing: 12px;
}

h4 {
  font-size: 2.8rem;
  letter-spacing: 14.4px;
}

h3 {
  font-size: 3.2rem;
  letter-spacing: 17.28px;
}

h2 {
  font-size: 3.6rem;
  letter-spacing: 20.736px;
}

h1 {
  font-size: 4rem;
  letter-spacing: 24.8832px;
}
person BurpmanJunior    schedule 19.02.2017
comment
К сожалению, я использую precss, и, похоже, он не работает. Я убрал знаки препинания. ### прецессирующий код: @define-mixin heading $size: 1.8rem, $spacing: 5px { @for $i from 1 through 4 { h$i { @extend %heading; font-size: resolve($size); letter-spacing: resolve($spacing); } $size: $size - .4rem; $spacing: $spacing * .5; } } - person Kristin Yetter; 23.02.2017