La regla @forward procesa las hojas de estilo Sass y hace que sus funciones, combinaciones y variables estén disponibles en los casos en que la hoja de estilo se carga usando la regla @use. Es posible organizar bibliotecas Sass en muchos archivos, además de proporcionar a los usuarios procesar un único archivo de punto de entrada.
Sintaxis:
@forward "<url>"
El código anterior carga el módulo disponible en la URL dada. Hace que los miembros públicos del módulo cargado estén disponibles para los usuarios del módulo como si estuvieran definidos directamente en el módulo. Esos miembros no están disponibles en el módulo si es necesario, también es probable que se use la regla @use . Solo procesa el módulo una vez. Si tanto @forward como @use están escritos para el mismo módulo en el mismo archivo, escriba siempre @forward primero. A través de esto, si los usuarios desean configurar el módulo reenviado, esa configuración se aplicará a @forward antes de que @use lo procese sin ninguna configuración.
Ejemplo:
// gfg/_list.css @mixin geeks font-family: times new roman font-size: 4px padding: 2px // geeksforgeeks.scss @forward "gfg/list" // style.scss @use "geeksforgeeks" gfg1 @include geeksforgeeks.geeks
Esto daría como resultado la siguiente salida CSS:
gfg1 {
font-family: times new roman
font-size: 4px
padding: 2px
}
Adición de prefijo:
en ocasiones, los nombres pueden no ser correctos fuera del módulo en el que están definidos, por esta razón, @forward tiene la opción de agregar un prefijo adicional a todos los miembros a los que apunta.
Sintaxis:
@forward "<url>" as <prefix>-*
Esto agrega el prefijo dado al comienzo de cada combinación, función y nombre de variable señalado por el módulo.
Ejemplo:
// gfg/_list.css @mixin forgeeks font-family: times new roman font-size: 4px padding: 2px // geeks.scss @forward "gfg/list" as geeks* // style.scss @use "geeksforgeeks" gfg1 @include geeks.geeksforgeeks
Esto daría como resultado la siguiente salida CSS:
gfg1 {
font-family: times new roman
font-size: 4px
padding: 2px
}
Configuración de módulos:
También es posible procesar un módulo con configuración utilizando la regla @forward. La configuración de la regla @forward también puede usar el indicador !default en su configuración. Esto permite que el módulo cambie los valores predeterminados de la hoja de estilo ascendente al mismo tiempo que permite que las hojas de estilo descendentes los anulen.
Ejemplo:
// _gfg.sass $green: #000 !default $border-radius: 2px !default $box-shadow: 0 2px 1px rgba($green, 1) !default geeks border-radius: $border-radius box-shadow: $box-shadow // _geeksforgeeks.sass @forward 'gfg' with ($green: #222 !default, $border-radius: 4px !default) // style.sass @use 'geeksforgeeks' with ($green: #333)
Esto daría como resultado la siguiente salida CSS:
geeks {
border-radius: 4px;
box-shadow: 0 2px 1px rgba(51, 51, 51, 1);
}