SASS | Módulos incorporados

Al igual que cualquier otro lenguaje de programación, SASS proporciona muchos módulos integrados que contienen varias funciones útiles y algunos complementos que facilitan su uso. Los módulos deben cargarse usando la regla @use , como cualquier otra hoja de estilo definida por el usuario, y de manera similar, sus funciones pueden llamarse como cualquier otro miembro del módulo. Todos los módulos incorporados comienzan con sass: para mostrar que son diferentes de otros módulos y que son parte del mismo SASS.
Compatibilidad: actualmente solo Dart Sass admite el uso de módulos integrados. Otras implementaciones como LibSass o Ruby Sass necesitan llamar a funciones usando sus nombres globales en lugar de usar la regla @use.

Ejemplo:

@use "sass:color"
.button
  color: green
  border: 2px solid color.scale(green, $lightness: 20%)

Esto daría como resultado la siguiente salida CSS:

.button {
  color: green
  border: 2px solid #20b2aa;
}

SASS proporciona los siguientes módulos integrados:

• El módulo sass:math proporciona las funciones que funcionan con números.
• El módulo sass:string brinda funciones que ayudan a combinar, dividir o buscar en strings.
• El módulo sass:color proporciona nuevos colores basados ​​en los existentes, ayudándote a crear temas.
• El módulo sass:list ayuda a acceder y modificar los valores de las listas.
• El módulo sass:map facilita el trabajo con mapas.
• El módulo sass:selector da acceso al motor selector de SASS.
• El módulo sass:meta brinda los detalles del funcionamiento interno de SASS.

Todas las funciones de SASS solían estar disponibles globalmente en todo momento antes de la introducción de los módulos SASS. Muchos de ellos todavía tienen acceso global, lo que significa que aún se puede acceder a ellos sin usar los módulos. El equipo de SASS dejará de usar su uso gradualmente hasta que se pueda acceder a ellas en las versiones anteriores de SASS y LibSass, que actualmente no admite módulos. Casi todas las funciones se han agregado a los módulos, pero hay algunas funciones que todavía solo están disponibles globalmente. La razón es porque tienen un comportamiento de evaluación especial como la función if(), o porque agregan un comportamiento adicional además de las funciones CSS integradas como rgb()y hsl()functions. Es posible que estos no queden obsoletos en el futuro y, por lo tanto, se pueden usar libremente.