Colore in variabili CSS

Converti colori hex in proprietà personalizzate CSS con convenzioni di denominazione

Che cos'è e come funziona?

Convertire un insieme di colori in proprietà personalizzate CSS (variabili) è un flusso di lavoro centrale nello sviluppo di design system. Invece di codificare valori di colore in tutto il CSS, li definisci una volta come `--colore-primario: #1DA1F2` nel selettore `:root`.

Questo strumento prende un elenco di valori di colore con i loro nomi e genera dichiarazioni di proprietà personalizzate CSS pronte all'uso e i loro equivalenti Sass/SCSS.

Casi d'uso

• Bootstrap del design system: incolla la tua palette del brand e genera il blocco di proprietà personalizzate CSS per il file dei token di design o la configurazione Tailwind.
• Cambio tema: definisci i colori del tema chiaro e scuro come set separati di proprietà personalizzate.
• Migrazione Sass: esporta variabili Sass legacy in proprietà personalizzate CSS per il theming nativo moderno del browser.

Domande frequenti

Qual è la differenza tra le proprietà personalizzate CSS e le variabili Sass?

Le variabili Sass vengono risolte in fase di compilazione. Le proprietà personalizzate CSS vengono risolte in fase di esecuzione nel browser — possono essere modificate dinamicamente con JavaScript e hanno scope di elemento.

Quale convenzione di nomenclatura usare per le variabili di colore?

Modelli comuni: denominazione semantica (`--colore-primario`), denominazione basata sulla scala (`--blu-100` fino a `--blu-900`), o entrambi.

Le proprietà personalizzate CSS possono essere usate nelle media query?

Parzialmente. Funzionano all'interno dei corpi delle media query ma non nelle condizioni stesse.

Come si ereditano e si sovrascrivono le proprietà personalizzate?

Si cascadano come le proprietà regolari. Sovrascrivile per un componente: `.card { --colore-primario: #FF0000; }` cambia il valore solo all'interno di `.card`.

Sviluppatore

Generatore UUID · Convertitore di timestamp · Codificatore Base64 · Decodificatore Base64 · Generatore di hash · Convertitore di colori