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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.