🖌️Custom Properties

Son una forma de almacenar valores específicos para reutilizarlos en tu hoja de estilos.

Para crear una variable en CSS, la defines usando el prefijo --, seguido del nombre de la variable, y luego le asignas un valor. Por lo general, las variables se definen dentro de la pseudo-clase :root, que corresponde al elemento raíz del documento (usualmente el elemento <html>), lo que las hace accesibles globalmente en tu hoja de estilos.

:root {
  /* Definiendo las variables */
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --espaciado: 16px;
}

/* Utilizando las variables */
.contenedor {
  color: var(--color-primario);
  background-color: var(--color-secundario);
  padding: var(--espaciado);
}

/* Puedes utilizar las variables en casi cualquier parte donde se esperaría un valor CSS */
.boton {
  background-color: var(--color-primario);
  border: 1px solid var(--color-secundario);
  margin: var(--espaciado);
}
AnteriorMódulo 6: Técnicas avanzadas en KarmaSiguienteTrucos

Última actualización