!default es una bandera Sass que indica la asignación condicional a una variable; asigna un valor solo si la variable no estaba definida previamente o null. Considere este fragmento de código:
$variable: 'test' !default;Para el compilador de Sass, esta línea dice:
Asignar $variable valorar 'test', pero solo si $variable aún no está asignado.
Aquí está el contraejemplo, que ilustra el otro lado de la !default comportamiento condicional de la bandera:
$variable: 'hello world';
$variable: 'test' !default;
// $variable still contains `hello world`Después de ejecutar estas dos líneas, el valor de $variable es todavía 'hello world' de la asignación original en la línea 1. En este caso, el !default La asignación en la línea 2 se ignora porque ya se ha proporcionado un valor y no se necesita ningún valor predeterminado.
Bibliotecas de estilos y @use...with
La principal motivación detrás !default in Sass tiene como objetivo facilitar el uso de bibliotecas de estilos y su conveniente inclusión en aplicaciones o proyectos posteriores. Especificando algunas de sus variables como !default, la biblioteca puede permitir que la aplicación de importación personalice o ajuste estos valores, sin bifurcar completamente la biblioteca de estilos. En otras palabras, !default las variables funcionan esencialmente como parámetros que modifican el comportamiento del código de la biblioteca.
Sass tiene una sintaxis especial solo para este propósito, que combina una importación de hoja de estilo con sus anulaciones de variables relacionadas:
// style.scss
@use 'library' with (
$foo: 'hello',
$bar: 'world'
);Esta declaración funciona casi igual que una asignación de variable seguida de una @import, al igual que:
// style.scss - a less idiomatic way of importing `library.scss` with configuration
$foo: 'hello';
$bar: 'world';
@import 'library';La importante distinción aquí, y la razón @use...with es preferible, se trata del alcance de las anulaciones. El with block deja muy claro, tanto para el compilador Sass como para cualquiera que lea el código fuente, que las anulaciones se aplican específicamente a las variables que se definen y usan dentro de library.scss. El uso de este método mantiene despejado el alcance global y ayuda a mitigar las colisiones de nombres de variables entre diferentes bibliotecas.
Caso de uso más común: personalización del tema
// library.scss
$color-primary: royalblue !default;
$color-secondary: salmon !default:
// style.scss
@use 'library' with (
$color-primary: seagreen !default;
$color-secondary: lemonchiffon !default:
);Uno de los ejemplos más ubicuos de esta característica en acción es la implementación de tematización. Una paleta de colores se puede definir en términos de variables Sass, con !default permitiendo la personalización de esa paleta de colores mientras que todos los demás estilos siguen siendo los mismos (incluso incluyendo mezclar o superponer esos colores).
Bootstrap exporta toda su API de variable Sass con la !default conjunto de banderas en cada elemento, incluida la paleta de colores del tema, así como otros valores compartidos como el espaciado, los bordes, la configuración de fuente e incluso las funciones y tiempos de aceleración de la animación. Este es uno de los mejores ejemplos de la flexibilidad que ofrece !default, incluso en un marco de diseño extremadamente completo.
En las aplicaciones web modernas, este comportamiento por sí solo podría replicarse utilizando propiedades personalizadas de CSS con un parámetro de reserva. Si su cadena de herramientas aún no hace uso de Sass, el CSS moderno puede ser suficiente para propósitos de tematización. Sin embargo, examinaremos casos de uso que solo pueden resolverse mediante el uso de Sass !default bandera en los dos ejemplos siguientes.
Caso de uso 2: cargar fuentes web de forma condicional
// library.scss
$disable-font-cdn: false !default;
@if not $disable-font-cdn {
@import url(''https://fonts.googleapis.com/css2?family=Public+Sans&display=swap'');
}
// style.scss
@use 'library' with (
$disable-font-cdn: true
);
// no external HTTP request is madeSass comienza a mostrar su fuerza cuando aprovecha su apariencia de preprocesador en el ciclo de vida de CSS. Suponga que la biblioteca de estilos del sistema de diseño de su empresa utiliza una fuente web personalizada. Se carga desde un CDN de Google, idealmente tan rápido como sea posible, pero, sin embargo, un equipo de experiencia móvil independiente en su empresa está preocupado por el tiempo de carga de la página; cada milisegundo es importante para su aplicación.
Para resolver esto, puede introducir un indicador booleano opcional en su biblioteca de estilos (ligeramente diferente de los valores de color CSS del primer ejemplo). Con el valor predeterminado establecido en false, puedes comprobar esta característica en un Sass @if declaración antes de ejecutar operaciones costosas como solicitudes HTTP externas. Los consumidores habituales de su biblioteca ni siquiera necesitan saber que existe la opción; el comportamiento predeterminado les funciona y cargan automáticamente la fuente desde la CDN, mientras que otros equipos tienen acceso a alternar lo que necesitan para ajustar y optimizar la carga de la página.
Una variable CSS no sería suficiente para resolver este problema, aunque el font-family podría anularse, la solicitud HTTP ya habría salido para cargar la fuente no utilizada.
Caso de uso 3: depuración visual de tokens de espaciado
Ver demostración en vivo
!default Los indicadores de características también se pueden utilizar para crear herramientas de depuración para su uso durante el desarrollo. En este ejemplo, una herramienta de depuración visual crea superposiciones codificadas por colores para los tokens de espaciado. La base es un conjunto de fichas de espaciado definidas en términos de “tallas de camiseta” ascendentes (también conocidas como “xs” / “extra-pequeñas” hasta “xl” / “extra-grandes”). De este conjunto de tokens únicos, un Sass @each El bucle genera todas las combinaciones de clases de utilidad que aplican ese token en particular al relleno o al margen, en cada lado (superior, derecho, inferior e izquierdo individualmente, o los cuatro a la vez).
Dado que todos estos selectores se construyen dinámicamente en un bucle anidado, y !default flag puede cambiar el comportamiento de renderizado de estándar (margen más relleno) a la vista de depuración de color (usando bordes transparentes con los mismos tamaños). Esta vista codificada por colores puede parecer muy similar a los entregables y los wireframes que un diseñador puede entregar para el desarrollo, especialmente si ya está compartiendo los mismos valores de espaciado entre diseño y desarrollo. Colocar la vista de depuración visual junto con la maqueta puede ayudar a detectar discrepancias de forma rápida e intuitiva, así como a depurar problemas de estilo más complejos, como el comportamiento de colapso de los márgenes.
Nuevamente, para cuando este código se compile para producción, ninguna de las visualizaciones de depuración estará en ninguna parte del CSS resultante, ya que será reemplazado por completo por el margen correspondiente o la declaración de relleno.
Otras lecturas
Estos son solo algunos ejemplos de Sass !default En la naturaleza. Consulte estos recursos de documentación y ejemplos de uso a medida que adapta la técnica a sus propias variaciones.
!defaultdocumentación@use withdocumentación- Valores predeterminados de la variable Bootstrap
- Un descaro
defaultcaso de uso (robot de pensamiento)