Цвета styleguide строения от SCSS

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

$colors: (
//  Variable     Name          Color       Hover    Description
    white:      'White'       #ffffff     #CCCCCC   'Use this for page background and text color on dark elements',
    black:      'Black'       #000000     #333333
);

В другом файле:

@function color($label) {
  $color: map-get($colors,$label);

  @if $color{
    @return nth($color, 2);
  }

  @warn 'No specified color for "#{$label}"; add your own to colors.scss';
  @return null;
}

.color-values-data {
  font-family: sassToJs($colors);
}

Я передаю данные в JavaScript с помощью sass-to-js и планирую построить цветовую диаграмму с этой информацией. Я могу использовать цвета в моих таблицах стилей, как это:

.heading {
  color: color(white);
}

Есть ли какой-то способ упростить или иным образом улучшить это? Например, я бы предпочел использовать $whiteвместоcolor(white), но я считаю, что это потребует дополнительного шага компиляции перед SCSS, так как он не поддерживает имена динамических переменных.

Этот проект не использует какой-либо существующий движок styleguide, потому что он должен генерировать модуль пользовательского интерфейса для CMS, которую мы используем (Magnolia), и этот подход позволяет нам использовать те же самые компоненты в styleguide, что и сам сайт.

1 ответ