no entiendo como puedo declarar una variable en una fila CSS y luego utilizar la misma variable en otra fila solo con var(--nombre_variable) sin hacer un import.
no entiendo como puedo declarar una variable en una fila CSS y luego utilizar la misma variable en otra fila solo con var(--nombre_variable) sin hacer un import.
Supongo que se debe a que declaras la variable en el :root{ }
Exactamente, como dice Jorge. Funciona de la siguiente manera: Se hace la conexión de html-css con el selector :root (usando Pseudo-clases), para posteriormente guardar las variables TAMBIÉN en el documento HTML. La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento
y es idéntico al selector html, excepto que su especificidad es mayor.
Excelente explicación, venía con la misma duda de no importación. Ahora, mi pregunta es, que alcance tiene ese root? a todos los archivos css que tenga en la misma carpeta que fue declarada la variable dentro del root? o tiene alcance a todos los archivos css que mi html haga referencia? Formulando la pregunta creo que encontré la respuesta... tiene mas lógica que tenga alcance a todos los archivos css que mi html haga referencia, dada la conexión usando pseudo clases.
Así es Seba, tiene un alcance total. Es decir que si vos creas variables con :root en 'STYILE.CCS podrás usarlas en el archivo 'STYLE2.CSS', siempre y cuando ambos archivos estén referenciados en el mismo HTML.