SASS Build-in Modules

SASS comes loaded with many built-in modules which are just like pre-defined stylesheets which can be directly included/imported in your stylesheet and used. We can use the @use at-rule to import SASS built-in modules and can then access their members.

The URL for all the built-in SASS modules begins with sass: so if you want to import the color built-in module, you will have to add the following statement in your stylesheet:

@use "sass:color"

Once we import any built-in module we can use its member mixins, variable, functions, etc. using the modules name, followed by dot operator and then the name of the member.

Let's take an example,

@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  /* using the funciton scale */
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

This SCSS code will be compiled to the following:

.button {
  color: #6b717f;
  border: 1px solid #878d9a;
}

SASS/SCSS Built-in Modules

By default, SASS/SCSS provides the following built-in modules:

sass:math module which provides us with functions to perform various operations on numbers like ciel, clamp, floor, max, min, etc.

sass:color module which provides various functions to perform various operations on colors like creating new colors based on existing colos for example creating a lihjter shade of an existing colors, hence this module is very useful in designing themes. This comes pre-loaded with functions like scale, lighten, saturation, opacity, alpha, etc.

sass:string module provides functions to split, combine or search strings. This comes pre-loaded with functions like quote, unquote, index, insert, length, slice, etc.

sass:list module is used to perform different operations on list value type. This has functions like append, join, length, etc.

sass:map module provides us functions to perform operations on SASS map value type using functions like get, keys, has-key, merge, etc.

sass:selector module gives us access to the SASS's selector engine used to inspect and manipulate selectors.

sass:meta module exposes the inner workings of SASS.

Conclusion:

With built-in modules SASS/SCSS developers have taken one step more towards making a web designers's life even more easier because with all these pre-defined modules and functions, all a developer has to do is to read about these modules and their functions and simply use them in the stylesheet.