Динамические интервалы с SASS

Question

Привет всем!

Я работаю с файлом sass, в котором есть множество жестко запрограммированных вспомогательных классов для отступов и полей.Поскольку мы здесь работаем с scss, это избыточно и может быть решено с помощью функции sass или чего-то еще.
У меня проблема в том, чтобы написать фантастический sass для выполнения тяжелой работы над этим,потому что это требует ... математики. вздох

---

В настоящее время это выглядит так ...

// Spacing
$spacer: 1rem;

// Margin Helpers
.m-0 {margin: 0;}
.m-1 {margin: ($spacer * .25);}
.m-2 {margin: ($spacer * .5);}
.m-3 {margin: ($spacer);}
.m-4 {margin: ($spacer * 1.5);}
.m-5 {margin: ($spacer * 3);}

.mt-0 {margin-top: 0;}
.mt-1 {margin-top: ($spacer * .25);}
.mt-2 {margin-top: ($spacer * .5);}
.mt-3 {margin-top: ($spacer);}
.mt-4 {margin-top: ($spacer * 1.5);}
.mt-5 {margin-top: ($spacer * 3);}

.ml-0 {margin-left: 0;}
.ml-1 {margin-left: ($spacer * .25);}
.ml-2 {margin-left: ($spacer * .5);}
.ml-3 {margin-left: ($spacer);}
.ml-4 {margin-left: ($spacer * 1.5);}
.ml-5 {margin-left: ($spacer * 3);}

Теперь представьте это ^^ со всех сторони интервалы, все жестко закодированы, и повторены для помощников заполненияДа, моя челюсть тоже лежит на земле.

Я бы хотел превратить описанный выше беспорядок в функцию sass, mixin, что бы ни было идеально для этой головоломки.Я изучил всю глубину интернета и обнаружил, что многое сложнее, чем нужно, или не могу сделать то, что мне нужно.Я не очень разбираюсь в функциях scss и миксинах, так что пока не запугивайте меня.

---

Я экспериментировал около 3 часов, пока, наконец, не сдался;во время которого я нашел и читал несколько статей, которые могут помочь, но я не мог обернуть вокруг него свою мозговую лапшу, поэтому я включу их ниже.

SASSПетля помощников по марже и отступам.Генерирует вспомогательные классы .mt-10.

Как динамически создавать вспомогательные классы, используя SCSS

---

Я дам вам огромную медаль виртуального объятия, если вы сможете помочь мне исправитьэто позор sass файла :)

Заранее спасибо!
~ Джош

Answer 1

Вот довольно простой миксин, чтобы делать то, что вы хотите:

@mixin generate($prefix, $property) {
  // List of sizes to generate for each
  $sizes: [0, .25, .5, 1, 1.5, 3];
  // Spacing to multiply the sizes by
  $spacing: 1rem;

  // Loop through all of the sizes(we use @for rather than @each, as we want access to the index)
  @for $i from 1 through length($sizes) {
    // Get the size for the current index
    $size: nth($sizes, $i);

    // Create the rule
    .#{$prefix}-#{$i - 1} {
      #{$property}: $spacing * $size;
    }
  }
}

Использование этого миксина будет выглядеть так:

@include generate(ml, margin-left);

И будет компилироваться в:

.ml-0 {
  margin-left: 0rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 1rem;
}

.ml-4 {
  margin-left: 1.5rem;
}

.ml-5 {
  margin-left: 3rem;
}

Вы можете поиграть с этим sassmeister .

Когда дело доходит до генерации их для большого количества свойств, вы можете сделать еще один шаг и использовать @each:

$rules: [
  [ml, margin-left],
  [mt, margin-top],
  [mb, margin-bottom],
  [mr, margin-right],
];

@each $item in $rules {
  @include generate(nth($item, 1), nth($item, 2));
}

И еще один sassmeister для вашего удобства.

Хотя вы могли бы пойти глубже и просто перебрать -top, -bottom и т. Д.так что вам просто нужно указать свойство, и все остальное будет сгенерировано, я не знаю ваш вариант использования, и вы можете выяснить это.