Creación de indicadores de funciones de hojas de estilo con Sass! Por defecto

!defaultes un indicador Sass que indica una 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 Sass, esta línea dice:

Asignar $variableal valor 'test', pero solo si $variable aún no está asignado.

Aquí está el contraejemplo, que ilustra el otro lado del !defaultcomportamiento 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 $variablesigue siendo 'hello world'de la asignación original en la línea 1. En este caso, la !defaultasignació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 !defaultde Sass es facilitar el uso de bibliotecas de estilos y su conveniente inclusión en aplicaciones o proyectos posteriores. Al especificar algunas de sus variables como !default, la biblioteca puede permitir que la aplicación importera personalice o ajuste estos valores, sin bifurcar completamente la biblioteca de estilos. En otras palabras, !defaultlas 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, así:

// style.scss - a less idiomatic way of importing `library.scss` with configuration$foo: 'hello';$bar: 'world';@import 'library';

La distinción importante aquí, y la razón @use...withes preferible, es el alcance de las anulaciones. El withbloque deja muy claro, tanto para el compilador de Sass como para cualquiera que lea el código fuente, que las anulaciones se aplican específicamente a las variables que se definen y utilizan dentro de library.scss. El uso de este método mantiene ordenado 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 omnipresentes de esta característica en acción es la implementación de temas . Una paleta de colores se puede definir en términos de variables Sass, permitiendo !defaultla personalización de esa paleta de colores mientras que todos los demás estilos permanecen iguales (incluso mezclando o superponiendo esos colores).

Bootstrap exporta toda su variable API Sass con la !defaultbandera configurada en cada elemento, incluida la paleta de colores del tema, así como otros valores compartidos como espaciado, bordes, configuración de fuente e incluso funciones y tiempos de facilitación de animación. Este es uno de los mejores ejemplos de la flexibilidad que ofrece !default, incluso en un marco de estilo extremadamente completo.

En las aplicaciones web modernas, este comportamiento por sí solo podría replicarse utilizando propiedades personalizadas de CSS con un parámetro alternativo. Si su cadena de herramientas aún no utiliza Sass, CSS moderno puede ser suficiente para los propósitos de la temática. Sin embargo, examinaremos casos de uso que solo se pueden resolver mediante el uso del !defaultindicador Sass 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+Sansdisplay=swap'');}// style.scss@use 'library' with (  $disable-font-cdn: true);// no external HTTP request is made

Sass comienza a mostrar su fuerza cuando aprovecha su apariencia de preprocesador en el ciclo de vida de CSS. Supongamos que la biblioteca de estilos del sistema de diseño de su empresa utilice una fuente web personalizada. Se carga desde una CDN de Google (idealmente lo más rápido posible), pero, aún así, un equipo independiente de experiencia móvil de su empresa tiene preocupaciones sobre 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, puede verificar este indicador de característica en una @ifdeclaración Sass antes de ejecutar operaciones costosas, como solicitudes HTTP externas. Los consumidores comunes de su biblioteca ni siquiera necesitan saber que la opción existe: el comportamiento predeterminado funciona para ellos 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 font-familypodría anularse, la solicitud HTTP ya se habría enviado para cargar la fuente no utilizada.

Caso de uso 3: depuración visual de tokens de espacio

!defaultLos indicadores de características también se pueden usar para crear herramientas de depuración para usar durante el desarrollo. En este ejemplo, una herramienta de depuración visual crea superposiciones codificadas por colores para los tokens de espacio. La base es un conjunto de fichas de espaciados definidos en términos de “tallas de camiseta” ascendentes (también conocidas como “xs”/”extrapequeña” hasta “xl”/”extragrande”). A partir de este único conjunto de tokens, un bucle Sass @eachgenera cada combinación de clases de utilidad aplicando ese token en particular al relleno o margen, en cada lado (arriba, derecha, abajo e izquierda individualmente, o los cuatro a la vez).

Dado que todos estos selectores se construyen dinámicamente en un bucle anidado, un solo !defaultindicador puede cambiar el comportamiento de representación de estándar (margen más relleno) a la vista de depuración coloreada (usando bordes transparentes con los mismos tamaños). Esta vista codificada por colores puede parecer muy similar a los entregables y esquemas que un diseñador podría entregar para el desarrollo, especialmente si ya comparte los mismos valores de espacio entre diseño y desarrollo. Colocar la vista de depuración visual al lado de 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 márgenes.

Nuevamente, cuando este código se compila para producción, ninguna visualización de depuración estará en ninguna parte del CSS resultante, ya que será reemplazada por completo por la declaración de margen o relleno correspondiente.

Otras lecturas

Estos son sólo algunos ejemplos de Sass !defaulten la naturaleza. Consulte estos recursos de documentación y ejemplos de uso a medida que adaptan la técnica a sus propias variaciones.

• !defaultdocumentacion
• @use withdocumentacion
• Valores predeterminados de la variable Bootstrap
• Un defaultcaso de uso de Sass (thinkbot)