Variables de SASS

Este artículo explica las variables en SASS.

Ofreceremos una explicación detallada de las variables de SASS y aprenderemos cómo usarlas paso a paso.

YouTube Video

Variables de SASS

SASS es un lenguaje de extensión para CSS que te permite escribir CSS de manera más flexible y eficiente. Entre sus características, las variables son una herramienta poderosa para mantener la coherencia de estilos y facilitar los cambios.

¿Qué son las variables de SASS?

Las variables de SASS proporcionan una forma de almacenar valores como colores, tamaños de fuente y espacios, que se utilizan frecuentemente en CSS, permitiendo gestionarlos en un solo lugar.

Al usar variables, puedes cambiar los estilos fácilmente y mejorar la legibilidad del código.

Cómo escribir variables

Las variables se pueden escribir de la siguiente manera.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Debes anteponer el símbolo $ al nombre de la variable.
• variable-name es el nombre de la variable. Se recomienda ponerle un nombre claro y descriptivo.
• value es el valor asignado a la variable.

Uso básico de las variables

A continuación se muestra un ejemplo básico de una variable en SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Una vez que defines una variable como $primary-color, puedes reutilizar el mismo valor cuantas veces quieras.
• Al cambiar un valor, solo necesitas modificar la definición de la variable, mejorando la mantenibilidad.

Salida CSS generada

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Uso de variables dentro de anidamientos

Combinar el anidamiento de SASS con variables ayuda a organizar tu código y facilita su gestión.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Puedes usar variables dentro de selectores anidados.
• Al combinar variables, puedes lograr un estilo flexible, como hacer que un color sea un 10% más oscuro utilizando la función color.adjust.

Salida CSS generada

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variables con valores por defecto

En SASS, puedes asignar valores por defecto a las variables. Asignar valores por defecto permite utilizar variables sin sobrescribir las existentes.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Al añadir !default, la variable no será sobrescrita si ya está definida.
• Esto es útil en el desarrollo en equipo o para configuraciones a nivel de proyecto.

Salida CSS generada

1p {
2    font-size: 16px;
3}

Ámbito de las variables

Las variables de SASS tienen un ámbito, y su disponibilidad depende de dónde estén definidas. Comprender el ámbito ayuda a prevenir la sobrescritura no intencionada de variables.

1. Ámbito global

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Las variables en el ámbito global están disponibles en todo el archivo.

2. Ámbito local

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Las variables en el ámbito local solo están disponibles dentro de un anidamiento o archivo específico.

Uso de variables en cálculos

Las variables de SASS también pueden usarse en cálculos. Se pueden realizar cálculos tanto sobre valores con unidades como sobre colores.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Salida CSS generada

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Utilizar variables para ajustes de color o cálculos de espacio mejora la mantenibilidad.

Resumen

Las variables de SASS son una característica esencial para una gestión y mantenimiento eficiente de CSS.

Usar variables de SASS ayuda a mantener estilos coherentes en todo el proyecto y facilita los cambios.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video