Совет: не обрабатывайте то, что вы можете создать, токен

Препроцессоры CSS, такие как Sass, Less и PostCSS, расширяют синтаксис наших таблиц стилей дополнительными функциями, которые могут сделать разработку намного более удобной. Допустим, ваш проект включает в себя модульную шкалу, чтобы адаптивно сохранять пропорции между типографикой и интервалами. Вместо того, чтобы выполнять все вычисления (или полагаться на калькулятор) для каждого правила, мы можем написать функцию, которая принимает желаемый шаг в нашей шкале…

  @use 'sass: math';

@function step ($ step, $ base: 1em, $ ratio: 1.5) {
  @return math.pow ($ ratio, $ step) * $ base;
}
 

… и возвращает правильное значение:

  @use 'path / to / functions / mod';

h1 {
  размер шрифта: mod.step (3); // => 3.375em
}

h2 {
  размер шрифта: mod.step (2); // => 2.25em
}

h3 {
  размер шрифта: mod.step (1); // => 1.5em
}
 

Проблема решена, верно?

Но предположим, что вы хотите, чтобы эти размеры заголовков использовались не только в ваших таблицах стилей : возможно, вы хотите интегрировать их в редактор блоков WordPress, динамически задокументировать их в Storybook, использовать их в собственном приложение или что-то совсем другое.

Нам нужны жетоны дизайна! Но в этом случае у нас есть новые проблемы. mod.step ничего не значит вне контекста наших файлов Sass. И если мы только токенизируем шаги шкалы, нам придется переписать математику преобразования для каждой поддерживаемой платформы. (Фу!)

Итак, давайте перенесем эту логику из нашего Sass в наши токены, начав с этой модульной функции масштабирования…

  const modStep = (шаг, коэффициент = 1,5) => {
  коэффициент доходности ** Число (шаг);
}

// Удобный метод для em единиц
const modStepEm = (... args) => {
  return `$ {modStep (... args)} em`;
}

export.modStep = modStep;
export.modStepEm = modStepEm;
 

… которые мы можем встроить в определения токенов. В Словаре стилей мы можем использовать те же методы, что и любой проект Node.js:

  const {modStepEm} = require ('../ path / to / modular-scale.js');

export = {
  размер: {
    шрифт: {
      заголовок_1: {значение: modStepEm (3)},
      заголовок_2: {значение: modStepEm (2)},
      heading_3: {value: modStepEm (1)},
    }
  }
};
 

Или вместо этого вы можете использовать настраиваемое преобразование, что может быть предпочтительнее, если вы хотите сохранить шаги как отдельные токены или преобразовать единицы по-разному для разных платформ. (Это работает и с Тео.)

Независимо от того, как именно вы это осуществите, результаты должны быть одинаковыми. Мы можем ссылаться на значения наших токенов в Sass…

  @use 'path / to / tokens';

h1 {
  размер шрифта: токены. $ size-font-heading-1; // => 3.375em
}

h2 {
  размер шрифта: токены. $ size-font-heading-2; // => 2.25em
}

h3 {
  размер шрифта: токены. $ size-font-heading-3; // => 1.5em
}
 

… или JavaScript…

  импортировать {size} из './path/to/tokens.js';

console.log (size.font.heading_1.value); // => '3.375em'
console.log (size.font.heading_2.value); // => '2.25em'
console.log (size.font.heading_3.value); // => '1.5em'
 

… или PHP…

  $ tokens_json = file_get_contents ('путь / к / tokens.json');
$ tokens = json_decode ($ tokens_json);

echo $ tokens-> size-> font-> heading_1; // => '3.375em'
echo $ tokens-> size-> font-> heading_2; // => '2.25em'
echo $ tokens-> size-> font-> heading_3; // => '1.5em'
 

… и так далее!

Объединяя наши значения токенов проекта и логику вместе вместо того, чтобы ограничивать их нашим препроцессором CSS, мы значительно упрощаем повторное использование этих значений на разных платформах. Что следует подумать в следующий раз, когда вы воспользуетесь @function или @mixin !