Importing built-in modules with @use in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @use rule do in Sass?

The @use rule loads a Sass module and makes its variables, mixins, and functions available in the current file with a namespace.

beginner

How do you import a built-in Sass module like <code>math</code>?

You write <code>@use "sass:math";</code> at the top of your Sass file to import the built-in <code>math</code> module.

intermediate

Why is it better to use @use instead of @import in Sass?

@use loads modules only once and avoids naming conflicts by using namespaces, making your stylesheets easier to maintain and faster to compile.

beginner

How do you call the pow function from the math module after importing it with @use "sass:math";?

You call it with the namespace like this: math.pow(2, 3) which calculates 2 to the power of 3.

intermediate

Can you rename a built-in module namespace when using @use? How?

Yes, you can rename it by adding as followed by the new name, for example: @use "sass:math" as m; then use m.pow(2, 3).

Which syntax correctly imports the built-in Sass color module?

A @use "sass:color";

B @import "color";

C @use "color";

D @import "sass:color";

The correct way to import built-in modules is with @use and the prefix "sass:", so @use "sass:color"; is correct.

After @use "sass:math";, how do you call the sqrt function?

A sqrt(9)

B math.sqrt(9)

C sass.math.sqrt(9)

D use.math.sqrt(9)

Functions from modules are called with the module namespace, so math.sqrt(9) is correct.

What is a benefit of using @use over @import in Sass?

A It loads modules multiple times

B It disables variables

C It avoids naming conflicts with namespaces

D It removes all styles

@use avoids naming conflicts by requiring namespaces, making code clearer and safer.

How do you rename the namespace of the math module to m?

A @use "sass:math" as m;

B @use "sass:math" rename m;

C @import "sass:math" as m;

D @use "math" as m;

You rename namespaces with the syntax: @use "sass:math" as m;

Which of these is NOT a built-in Sass module?

A sass:math

B sass:list

C sass:color

D sass:layout

"sass:layout" is not a built-in Sass module; math, color, and list are.

Explain how to import and use a built-in Sass module with @use.

Think about the syntax and how you access module features.

Why should you prefer @use over @import in modern Sass projects?

Consider how @use handles namespaces and module loading.