SASS | Built-In Modules

Just like any other programming language, SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. The modules are to be loaded using the @use rule, just like any other user defined stylesheet, and similarly its functions can be called just like any other module member. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. Compatibility: Currently only Dart Sass supports the use of built-in modules. Other implementations like LibSass or Ruby Sass need to call functions using their global names instead of using @use rule. Example: css

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

This would result in the following CSS output:

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

SASS provides the following built-in modules:

• The sass:math module gives the functions that works on numbers.
• The sass:string module gives functions that helps in combining, splitting or searching in strings.
• The sass:color module provides new colors based on the existing ones, helping you in making themes.
• The sass:list module helps in accessing and modifying values of lists.
• The sass:map module makes the working with maps easier.
• The sass:selector module gives the access to selector engine of SASS.
• The sass:meta module gives the details of the inner working of SASS.

All the SASS functions used to be globally available at all times before the introduction of SASS modules. Many of them still have global access, meaning that they can still be accessed without using the modules. Their use will be gradually deprecated by the SASS team until they can be accessed in the older SASS versions and the LibSass, which does not currently support modules. Almost all functions have been added to the modules, but there are some functions that are still only available globally. The reason being either because they have some special evaluation behavior like if() function, or because they add some extra behavior on top of the built-in CSS functions like rgb() and hsl() functions. These may not be deprecated in the future too and hence can be used freely.