¿Cómo se aplican las variables CSS en un proyecto real?

¡Hola Ángel!

Aplicar variables CSS en un proyecto real es una excelente manera de mantener un código limpio y fácil de mantener. Puedes utilizar variables CSS para definir colores, tamaños de fuentes, márgenes, rellenos y mucho más.

Supongamos que has definido algunas variables CSS al principio de tu archivo CSS, de la siguiente manera:

:root {
  --color-primario: #ff6600;
  --color-secundario: #0066ff;
  --tamano-letra: 16px;
}

Luego, puedes utilizar esas variables en el resto de tu archivo CSS, de la siguiente manera:

.elemento {
  color: var(--color-primario);
  font-size: var(--tamano-letra);
}

.otro-elemento {
  background-color: var(--color-secundario);
  margin: calc(var(--tamano-letra) * 2);
}

De esta manera, si necesitas cambiar un color o un tamaño de fuente en todo tu proyecto, solo necesitas modificar la variable correspondiente al principio del archivo, en lugar de tener que buscar y cambiar cada instancia individualmente.

Espero que este ejemplo te ayude a comprender cómo aplicar variables CSS en un proyecto real. ¡Buena suerte con tus proyectos!

¡Un abrazo y buenos estudios!