Questions tagged [sass-modules]

Overview:

The @use rule loads mixins, functions, and variables from other Sass files, and combines CSS from multiple files together.

Sass files loaded by @use are called modules.

Example:

@use 'buttons';

Sass also provides built-in modules full of useful functions.

The @use is quite similar to @import. but has a few differences:

• The file is only imported once, no matter how many times you @use it.

• Variables, mixins, and functions that start with an underscore (_) or hyphen (-) are considered private, and not imported.

• Members (Variables, mixins, and functions) from the used file are only made available locally, but not passed along to future imports.

• Similarly, @extends will only apply up the chain; extending selectors in imported files, but not extending files that import this one.

• All imported members are namespaced by default.

When we @use a file, Sass automatically generates a namespace based on the file name:

@use 'buttons'; // creates a `buttons` namespace

Built-in Modules:

From the official documentation

Sass provides many built-in modules which contain useful functions (and the occasional mixin). These modules can be loaded with the @use rule like any user-defined stylesheet, and their functions can be called like any other module member. All built-in module URLs begin with sass: to indicate that they're part of Sass itself.

Sass provides the following built-in modules:

• The sass:math module provides functions that operate on numbers.

• The sass:string module makes it easy to combine, search, or split apart strings.

• The sass:color module generates new colors based on existing ones, making it easy to build color themes.

• The sass:list module lets you access and modify values in lists.

• The sass:map module makes it possible to look up the value associated with a key in a map, and much more.

• The sass:selector module provides access to Sass’s powerful selector engine.

• The sass:meta module exposes the details of Sass’s inner workings.