Współdzielone zmienne w PostCSS

Question

W Sass mogę zdefiniować moje zmienne w oddzielnym pliku _variables.scss, a następnie udostępnić te zmienne w dowolnym miejscu I @import variables;. (W rzeczywistości zmienne są dostępne globalnie po ich pierwszym imporcie.) Dzięki PostCSS mogę używać postcss-simple-vars lub postcss-css-variables do definiowania zmiennych lokalnych dla pojedynczego pliku. Chciałbym zdefiniować wszystkie/większość zmiennych w jednym pliku, a następnie @import ten plik, gdziekolwiek potrzebuję ich użyć.

Wiem, że wtyczki PostCSS mogą mieć predefiniowane zmienne skonfigurowane dla wtyczki, ale nie mogę np. obliczyć kontrastowy kolor dla danego tła.

---

Edytuj: Prawdopodobnie nie miałem jasności co do mojego pytania. Czy istnieje sposób definiowania zmiennych PostCSS w pliku CSS, tak aby zmienne nie były globalne, ale można je "zaimportować" do innego pliku CSS? Jak wspomniano powyżej, mogę używać Sass, ale wtedy wszystkie zmienne są skutecznie globalne (nie idealne). W przeciwnym razie w PostCSS mogę zdefiniować zmienne w każdym arkuszu stylów, których potrzebuję (o co chodzi?), lub Mogę je zdefiniować w statycznej strukturze JavaScript (statycznej, ponieważ nie mogą odwoływać się do innych zmiennych).

Answer 1

Kilka opcji znam:

• Both postcss-simple-Vars i postcss-niestandardowych właściwości pozwalają przechodzić w zmiennych z JavaScript zamiast definiować je w plikach CSS - co oznacza, że ​​będą dostępne wszędzie: https://github.com/postcss/postcss-simple-vars#variables; https://github.com/postcss/postcss-custom-properties#variables
• Skonsumuj swoje pliki, umieszczając zmienne u góry, przed kompilowaniem za pomocą PostCSS. Lub użyj importu postcss, aby obsłużyć to za Ciebie.

Answer 2

Możesz użyć postcss-import do importowania plików, takich jak w Saas.

Następnie tworzysz pliki ze zmiennymi i importujesz je tam, gdzie chcesz.

@import "css/_variables.css"; 

Answer 3

Naprawdę nie rozumiem, co próbujesz osiągnąć, lub co masz na myśli przez zmienne globalne. Celem zmiennych jest uzyskanie dostępu do nich w plikach CSS. Nie będą one wkompilowane w Twój CSS, więc dlaczego nie po prostu przechowywać wszystkie zmienne w pliku o nazwie global.css i odwoływać się do zmiennych tam, gdzie potrzebujesz, importując plik globalny.

SCSS jest tylko preprocesorem, więc żadna z twoich zmiennych nie jest zapisywana w pliku CSS, więc nie musisz martwić się o zakres zmiennych.