Variabili condivise in PostCSS

Question

In Sass posso definire le mie variabili in un file separato _variables.scss, quindi rendere queste variabili disponibili ovunque I @import variables;. (In realtà le variabili sono disponibili globalmente dopo la loro prima importazione.) Con PostCSS posso usare postcss-simple-vars o postcss-css-variables per definire le variabili locali in un singolo file. Mi piacerebbe definire tutte/molte variabili in un singolo file, quindi @import quel file ovunque io abbia bisogno di usarle.

So che i plug-in PostCSS possono avere variabili predefinite configurate per il plug-in, ma quindi non posso ad es. calcola un colore contrastante per un dato sfondo.

---

Modifica: Probabilmente non ero chiaro su quale fosse la mia domanda. C'è un modo per definire le variabili PostCSS in un file CSS in modo tale che le variabili non siano globali, ma possono essere "importate" in un altro file CSS? Come detto sopra, posso usare Sass, ma tutte le variabili sono effettivamente globali (non ideali). Altrimenti in PostCSS posso definire le variabili in ogni foglio di stile di cui ho bisogno (qual è il punto?), o Posso definirle in una struttura JavaScript statica (statiche in quanto non possono fare riferimento ad altre variabili).

Answer 1

Alcune opzioni io conosca:

• Sia postcss-semplici-Vars e postcss-custom-proprietà consentono di passare in variabili da JavaScript invece di dover definirli in file CSS - il che significa che sarebbero accessibili ovunque: https://github.com/postcss/postcss-simple-vars#variables; https://github.com/postcss/postcss-custom-properties#variables
• Concatena i tuoi file, mettendo le variabili in alto, prima di compilare con PostCSS. Oppure usa postcss-imports per gestirlo per te.

Answer 2

È possibile utilizzare postcss-import per importare file come in Saas.

Quindi, si creano un file con i vars e li si importa dove preferisci.

@import "css/_variables.css"; 

Answer 3

Davvero non capisco cosa stai cercando di realizzare, o cosa intendi per variabili globali. Il punto delle variabili è di accedervi attraverso i file CSS. Non saranno comunque compilati nel CSS, quindi perché non memorizzare tutte le variabili in un file chiamato global.css e fare riferimento alle variabili ovunque sia necessario importando il file globale.

SCSS è solo un preprocessore quindi nessuna delle tue variabili viene effettivamente scritta nel file CSS, quindi non ti devi preoccupare dell'ambito delle variabili.