Variables en CSS y SCSS

CSS
SCSS

Variables CSS

CSS son una característica relativamente nueva que permite definir valores reutilizables que pueden ser utilizados en múltiples lugares en tu hoja de estilo. Esto puede hacer que tu código CSS sea más legible, mantenible y fácil de actualizar.

Definición de Variables:

Las variables en CSS se definen usando la sintaxis --nombre-variable: valor;, dentro de un selector. Generalmente, se definen dentro del selector :root, que representa el elemento raíz del documento (usualmente <html>). Aquí tienes un ejemplo:

/* Definición de variables */
:root {
  --color-primario: #3498db;
  --tamanio-texto: 16px;
}

Uso de Variables:

Para usar una variable en CSS, se utiliza la función var(), que acepta el nombre de la variable como argumento. Aquí tienes un ejemplo de cómo usar las variables definidas anteriormente:

/* Uso de variables */
.elemento {
  color: var(--color-primario);
  font-size: var(--tamanio-texto);
}

Ventajas de las Variables en CSS:

Reutilización de valores: Puedes definir un valor una vez y usarlo en múltiples lugares en tu hoja de estilo, lo que evita la repetición de código y facilita la actualización.
Mantenibilidad: Si necesitas cambiar un valor, solo necesitas hacerlo en un lugar (la definición de la variable), en lugar de buscar y actualizar todos los lugares donde se utiliza ese valor.
Claridad y Legibilidad: Las variables permiten dar nombres descriptivos a valores importantes, lo que hace que el código sea más claro y fácil de entender.
Facilita la personalización: Si tienes variables para colores, tamaños de fuente u otros valores, es más fácil para los desarrolladores y diseñadores personalizar el aspecto de un sitio web ajustando simplemente los valores de las variables.

Variables SCSS

Las variables en SCSS funcionan de manera similar a las de CSS, pero con algunas ventajas adicionales y una sintaxis ligeramente diferente.

Definición de Variables en SCSS:

En SCSS, las variables se definen usando el símbolo de dólar $. Puedes definir una variable en cualquier parte de tu archivo SCSS. Aquí tienes un ejemplo:

/* Definición de variables */
$color-primario: #3498db;
$tamanio-texto: 16px;

Uso de Variables en SCSS:

Al igual que en CSS, para utilizar una variable en SCSS, simplemente la llamas por su nombre dentro de tu código. Aquí tienes un ejemplo de cómo usar las variables definidas anteriormente:

/* Uso de variables */
.elemento {
  color: $color-primario;
  font-size: $tamanio-texto;
}

Anidamiento de Variables en SCSS:

Una de las ventajas de SCSS es que puedes anidar reglas, lo que puede hacer que tu código sea más legible y mantenible. Esto significa que puedes definir variables dentro de un contexto específico. Aquí tienes un ejemplo:

/* Anidamiento de variables */
.elemento {
  $padding: 10px;
  padding: $padding;

  &:hover {
    background-color: darken($color-primario, 10%);
    padding: $padding + 5px;
  }
}

Interpolación de Variables:

En SCSS, también puedes interpolar variables dentro de otras cadenas usando #{}. Esto puede ser útil cuando necesitas combinar una variable con un valor específico. Aquí tienes un ejemplo:

/* Interpolación de variables */
$imagen-ruta: "../img/";
.imagen-fondo {
  background-image: url(#{$imagen-ruta}fondo.jpg);
}

Ventajas de las Variables en SCSS:

Reutilización y Mantenibilidad: Al igual que en CSS, las variables en SCSS te permiten definir valores una vez y reutilizarlos en múltiples lugares, facilitando la actualización y el mantenimiento.
Anidamiento y Claridad: Puedes definir variables dentro de reglas específicas, lo que puede hacer que tu código sea más claro y fácil de entender.
Interpolación y Flexibilidad: La capacidad de interpolar variables en otras cadenas te da más flexibilidad y control sobre cómo se utilizan esas variables.