Общие переменные в PostCSS

Question

В Sass я могу определить свои переменные в отдельном файле _variables.scss, а затем сделать эти переменные доступными в любом месте I @import variables;. (Фактически переменные глобально доступны после их первого импорта.) С PostCSS я могу использовать postcss-simple-vars или postcss-css-variables для определения переменных, локальных для одного файла. Я хотел бы определить все/большинство переменных в одном файле, затем @import этот файл, где бы я ни хотел их использовать.

Я знаю, что плагины PostCSS могут иметь предварительно определенные переменные, настроенные для плагина, но тогда я не могу, например. вычислите контрастный цвет для заданного фона.

---

Редактировать: Я, вероятно, не совсем понял, о чем был мой вопрос. Есть ли способ определить переменные PostCSS в файле CSS, чтобы переменные не были глобальными, но могут быть «импортированы» в другой файл CSS? Как упоминалось выше, я могу использовать Sass, но тогда все переменные являются глобальными (не идеальными). В противном случае в PostCSS я могу определить переменные в каждой таблице стилей, в которой они мне нужны (в чем смысл?), или Я могу определить их в статической структуре JavaScript (статический, поскольку они не могут ссылаться на другие переменные).

Answer 1

Несколько вариантов я знаю:

• Оба postcss-простой-ВАР и postcss-заказ свойства позволяют передавать переменные из JavaScript вместо того, чтобы определить их в CSS файлах - что они будут доступны повсюду: https://github.com/postcss/postcss-simple-vars#variables; https://github.com/postcss/postcss-custom-properties#variables
• Объедините свои файлы, поставив переменные наверху, перед компиляцией с PostCSS. Или используйте postcss-import, чтобы справиться с этим для вас.

Answer 2

Для импорта файлов, таких как Saas, вы можете использовать postcss-import.

Затем вы создаете файлы с варами и импортируете их там, где хотите.

@import "css/_variables.css"; 

Answer 3

Я действительно не понимаю, чего вы пытаетесь достичь или что вы подразумеваете под глобальными переменными. Точка переменных - это доступ к ним через ваши файлы CSS. В любом случае они не будут скомпилированы в ваш CSS, поэтому не просто сохраните все свои переменные в файле global.css и укажите переменные везде, где вам нужно, импортируя глобальный файл.

SCSS - это просто препроцессор, поэтому никакие ваши переменные не записываются в файл CSS, поэтому вам не нужно беспокоиться о просмотре переменных.