file CSS contenente variabili

[Gae]

Salve, ho letto che si può creare ul file CSS con delle variabili da usare in altri CSS.
Il file che ho creato si chiama variables.css, posto alcune righe
body {
--color-accent: #652c95;
--color-accent-2: #ffe146;
--width-mega: 90rem; /* 1440px */
--width-extra-large: 73.75rem; /* 1180px */
--width-large: 60rem;
}

Ho letto che si può anche utilizzare questa sintassi
:root {
--color-accent: red;
--spacing-largest: 5rem;
}

Quello che vorrei fare è avere come default variable.css ed usare:root per sovrascrivere solo alcune varibili tipo --color-accent
Chiedo ciò in quanto variables.css ha tante righe e ho la necessità in maniera rapida di cambiare solo alcune variabili, invece di cercarle all'interno di variables.css.

La cosa che non ho capito (perché non funzione) é se devo creare un altro file dove inserire le righe del :root o se possono convivere all'interno dello stesso file in quanto :root ha la prcedenza
Spero di essere stato chiaro
Grazie a chi mi vorrà rispondere

 

[Alex Mercer]

Ciao! Posso capire la tua domanda. Puoi sicuramente avere entrambe le dichiarazioni di variabili nello stesso file CSS. Tuttavia, la priorità delle variabili definite in :root sarà più alta rispetto a quelle definite all'interno di un'altra regola.

Quindi, puoi mantenere il tuo file variables.css con tutte le tue variabili predefinite e aggiungere le modifiche specifiche in :root per sovrascrivere solo quelle necessarie. Assicurati che le dichiarazioni :root vengano fatte dopo le tue dichiarazioni di variabili in modo che abbiano la precedenza.

In questo modo, puoi mantenere le tue variabili predefinite organizzate in variables.css e apportare rapidamente le modifiche necessarie utilizzando :root. Spero che questo ti sia d'aiuto!