Variables Globales CSS

Roy Andres Huaman Avila · 2025-07-18T05:44:04Z

Variables Globales en el selector :root En el inicio de cada proyecto, crea un archivo de estilos (por ejemplo, _settings.scss ) para definir las variables globales. Estas variables representan los ajustes visuales del proyecto, como colores, sombras, espaciado, etc. Utiliza el selector :root para definir estas variables. Por ejemplo: :root { /* Colores de la interfaz de usuario */ --primary-hue : 12 ; --color--primary : hsl ( var ( --primary-hue ), 100% , 44% ); --color--primary--hover : hsl ( var ( --primary-hue ), 100% , 39% ); --color--primary--active : hsl ( var ( --primary-hue ), 84% , 30% ); /* Sombras */ --shadow-01 : 0px 2px 4px rgba ( 37 , 37 , 37 , 0.1 ); --shadow-02 : 0px 4px 8px rgba ( 37 , 37 , 37 , 0.1 ); /* ...otros estilos... */ } Enter fullscreen mode Exit fullscreen mode Luego, utiliza estas variables en otros selectores para mantener la coherencia visual. .card { box-shadow : var ( --shadow-01 ); border : 1px solid var ( --border-color ); transition : box-shadow 0.2s linear ; &:hover, &:focus { box-shadow : var ( --shadow-03 ); } } Enter fullscreen mode Exit fullscreen mode <aside> 💡 Si necesitas cambiar algún ajuste durante el proyecto, modifica la variable en un solo lugar (en **`:root`**) </aside> Enter fullscreen mode Exit fullscreen mode Variables Personalizadas (Custom Properties) Las variables personalizadas (también conocidas como Custom Properties ) son una característica de CSS que permite definir variables reutilizables en tus estilos. Define tus variables personalizadas en el selector :root o en cualquier otro selector. Por ejemplo: :root { --spacing : 1.2rem ; --main-color : hotpink ; /* ...otros estilos... */ } - Luego, úsalas en tus estilos: Enter fullscreen mode Exit fullscreen mode ```css .button { padding: var(--spacing); background-color: var(--main-color); /* ...otros estilos... */ } ``` Enter fullscreen mode Exit fullscreen mode - La ventaja de las variables personalizadas es que son más flexibles y pueden utilizarse en cualquier parte del documento, no solo en el nivel global. Enter fullscreen mode Exit fullscreen mode Utiliza la extensión CSS Variable Autocomplete Esta extensión mejora la experiencia de desarrollo web al proporcionar funciones avanzadas como autocompletado, vista previa de colores y navegación a la definición de variables. Te ayudara con el autocompletado a otros archivos CSS que tengas en :root .

#css #html #frontend #react

Variables Globales en el selector :root
- En el inicio de cada proyecto, crea un archivo de estilos (por ejemplo, _settings.scss) para definir las variables globales. Estas variables representan los ajustes visuales del proyecto, como colores, sombras, espaciado, etc.
- Utiliza el selector :root para definir estas variables. Por ejemplo:

    :root {
      /* Colores de la interfaz de usuario */
      --primary-hue: 12;
      --color--primary: hsl(var(--primary-hue), 100%, 44%);
      --color--primary--hover: hsl(var(--primary-hue), 100%, 39%);
      --color--primary--active: hsl(var(--primary-hue), 84%, 30%);

      /* Sombras */
      --shadow-01: 0px 2px 4px rgba(37, 37, 37, 0.1);
      --shadow-02: 0px 4px 8px rgba(37, 37, 37, 0.1);
      /* ...otros estilos... */
    }

Luego, utiliza estas variables en otros selectores para mantener la coherencia visual.

    .card {
      box-shadow: var(--shadow-01);
      border: 1px solid var(--border-color);
      transition: box-shadow 0.2s linear;

      &:hover,
      &:focus {
        box-shadow: var(--shadow-03);
      }
    }

<aside>
💡 Si necesitas cambiar algún ajuste durante el proyecto, modifica la variable en un solo lugar (en **`:root`**)

</aside>

Variables Personalizadas (Custom Properties)
- Las variables personalizadas (también conocidas como Custom Properties) son una característica de CSS que permite definir variables reutilizables en tus estilos.
- Define tus variables personalizadas en el selector :root o en cualquier otro selector. Por ejemplo:
```
:root {
  --spacing: 1.2rem;
  --main-color: hotpink;
  /* ...otros estilos... */
}
```

- Luego, úsalas en tus estilos:

```css
.button {
  padding: var(--spacing);
  background-color: var(--main-color);
  /* ...otros estilos... */
}
```

- La ventaja de las variables personalizadas es que son más flexibles y pueden utilizarse en cualquier parte del documento, no solo en el nivel global.

Utiliza la extensión CSS Variable Autocomplete
Esta extensión mejora la experiencia de desarrollo web al proporcionar funciones avanzadas como autocompletado, vista previa de colores y navegación a la definición de variables.
Te ayudara con el autocompletado a otros archivos CSS que tengas en :root.