Стилус: Есть ли способ сделать эту СУШКУ

Question

У меня есть несколько хэшей, которые я хочу перебрать.

Например, у меня есть хэш цветов:

colors = {
  red: #f00f00,
  green: #78f000,
  blue: #0090f0,
}

И хеш размеров:

fontSize = {
  small:  14px,
  base:   16px,
  large:  18px
}

Затем я перебираю эти хеши. Вот упрощенный пример:

for name, color in colors
  .{name}
    background-color: color

for name, size in fontSize
  .{name}
    font-family: size

То, что я хочу знать, есть ли сушилка для этого. Т.е. я не хочу переписывать цикл for... in снова и снова (так как это одна и та же структура для каждого хэша.

Есть ли способ, которым это можно сделать (и, если да, то как)?

Благодарю.

Answer 1

Вы можете сделать функцию с циклом и использовать аргументы, чтобы получить имя класса и установить необходимое свойство:

стилус

colors = {
  red: #f00f00,
  green: #78f000,
  blue: #0090f0
}

fontSize = {
  small:  14px,
  base:   16px,
  large:  18px
}

loop(hashname, prop)
  for class, value in hashname
    .{class}
      {prop}: value


loop(colors, background-color)

loop(fontSize, font-size)

Выход

.red {
  background-color: #f00f00;
}
.green {
  background-color: #78f000;
}
.blue {
  background-color: #0090f0;
}
.small {
  font-size: 14px;
}
.base {
  font-size: 16px;
}
.large {
  font-size: 18px;
}