Importing built-in modules with @use in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code using @use?

Consider the following Sass code snippet:

@use "sass:color";

.button {
  color: color.scale(#6699cc, $lightness: 20%);
}

What CSS color value will be generated for the .button class?

SASS

@use "sass:color";

.button {
  color: color.scale(#6699cc, $lightness: 20%);
}

A color: #6699cc;

B color: #336699;

C color: #99bbee;

D color: #99ccff;

💡 Hint

The color.scale function adjusts the lightness of the base color by the given percentage.

The base color #6699cc is lightened by 20%, resulting in a lighter blue shade #99bbee.

🧠 Conceptual

intermediate

Which statement about @use importing built-in Sass modules is true?

Select the correct statement about using the @use rule to import built-in Sass modules like sass:math or sass:color.

A Built-in modules must be imported with a namespace and cannot be imported without one.

B Built-in modules can be imported multiple times without any namespace conflicts.

C Built-in modules are automatically available without any import statement.

D Built-in modules can only be imported using @import, not @use.

💡 Hint

Think about how @use handles namespaces for modules.

When you import built-in modules with @use, you must use their namespace to access their functions or variables. This prevents naming conflicts.

❓ selector

advanced

Which option correctly uses a built-in Sass module function with @use?

Given the Sass code below, which option correctly uses the math.div function from the built-in sass:math module to divide 10 by 2?

SASS

@use "sass:math";

.result {
  width: ???;
}

A width: math(10 / 2);

B width: math.div(10, 2);

C width: div(10, 2);

D width: math.division(10, 2);

💡 Hint

Remember to use the namespace and exact function name.

The correct syntax is to call the div function with the math namespace: math.div(10, 2).

❓ layout

advanced

What CSS does this Sass code produce when using @use with sass:list?

Analyze the following Sass code:

@use "sass:list";

.container {
  grid-template-columns: list.join(("1fr", "2fr", "1fr"), " ");
}

What is the resulting CSS for .container?

SASS

@use "sass:list";

.container {
  grid-template-columns: list.join(("1fr", "2fr", "1fr"), " ");
}

A grid-template-columns: 1fr 2fr 1fr;

B grid-template-columns: ("1fr", "2fr", "1fr");

C grid-template-columns: 1fr, 2fr, 1fr;

D grid-template-columns: list.join(1fr 2fr 1fr);

💡 Hint

The list.join function combines list items into a string separated by the given separator.

list.join merges the list items into a single string separated by spaces, producing valid CSS grid columns.

❓ accessibility

expert

What error occurs if you try to use a built-in Sass module function without @use?

Consider this Sass code:

.box {
  width: math.div(20, 4);
}

What happens if you do NOT include @use "sass:math"; at the top?

A Error: Missing semicolon after math.div.

B The code compiles and outputs width: 5;

C Warning: math.div is deprecated but still works.

D Error: Undefined function "math.div".

💡 Hint

Think about how Sass knows where functions come from.

Without importing the sass:math module using @use, the math namespace and its functions are unknown, causing an undefined function error.