El Indicador `!default` en SASS

Este artículo explica la bandera !default en SASS.

Explicaremos en detalle la bandera !default y mostraremos cómo utilizarla con ejemplos prácticos.

YouTube Video

El Indicador !default en SASS

El indicador !default en SASS es una herramienta importante para mejorar la modularidad y reutilización de las hojas de estilo. Al usar este indicador, puedes definir valores predeterminados para las variables, permitiendo que los valores definidos en otro lugar tengan prioridad. Aquí explicaremos en detalle el indicador !default y demostraremos su uso con ejemplos prácticos.

El indicador !default es una característica específica de SASS que se utiliza para asignar valores predeterminados a las variables. Al agregar este indicador, se logra el siguiente comportamiento:.

• Especificar valores predeterminados El valor sólo se asigna si la variable no ha sido definida en otro lugar.

• Control de Prioridad Si la variable ya está definida, su valor no se sobrescribirá.

Esta característica es especialmente útil al construir módulos y librerías. Los usuarios pueden establecer valores personalizados, pero si no se especifica ninguno, se usarán los valores predeterminados.

Ejemplo Básico

El siguiente código muestra el uso básico del indicador !default.

1// _variables.scss
2$primary-color: blue !default;

• Definiendo la variable predeterminada $primary-color usando la bandera !default.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• Importando variables usando @use y sobrescribiendo $primary-color con with.

CSS de Salida

1body {
2    background-color: red;
3}

• En este ejemplo, como $primary-color está establecido como red en main.scss, el valor blue definido en _variables.scss no será utilizado.

Cuando una Variable No Está Definida

Si la variable no está definida en main.scss, se utilizará el valor predeterminado.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• Como la variable se importa sin sobrescribirla, se aplica el valor predeterminado blue de $primary-color definido en _variables.scss.

CSS de Salida

1body {
2    background-color: blue;
3}

Uso en Módulos Anidados

Usar !default dentro de módulos permite una personalización flexible.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• Definiendo $primary-color y $button-color con la bandera !default.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• Importando el módulo variables y especificando el color de .button usando la variable $button-color.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• Utilizando @use con with para sobrescribir $button-color con orange, y usando el módulo buttons.

CSS de Salida

1.button {
2    color: orange;
3}

• De este modo, los módulos ofrecen valores predeterminados respetando las configuraciones definidas por el usuario.

Puntos a Tener en Cuenta

Al utilizar el indicador !default, se deben considerar los siguientes puntos:.

• Elegir valores predeterminados apropiados Los valores predeterminados deben elegirse para cubrir los casos de uso más habituales.

• Diseño Intencional Usa nombres de variables consistentes y evita conflictos con otros módulos.

• Verificación del Orden Para que el indicador !default funcione correctamente, se debe administrar de manera adecuada el orden en el que se sobrescriben las variables.

Escenarios Prácticos

Cambio de Temas

Por ejemplo, al crear una librería que soporte temas, puedes usar !default para proporcionar valores predeterminados personalizables.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• Definiendo $background-color y $text-color con la bandera !default para el tema, y aplicándolos al body.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• Personalizando el tema sobrescribiendo $background-color con @use y with.

CSS de Salida

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Componentes Reutilizables

En un componente de botón reutilizable, puedes proveer estilos predeterminados permitiendo que el usuario sobrescriba el color.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• Definiendo los colores de fondo y texto predeterminados para los botones con !default y aplicando los estilos.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• Personalizando el color del botón sobrescribiendo $button-bg con @use y with.

CSS de Salida

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Resumen del Indicador !default

El indicador !default en SASS es una herramienta poderosa al crear módulos y librerías. Mejora la reutilización permitiendo una personalización flexible.

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