Why modular built-ins improve organization in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a built-in Sass module.

SASS

@use '[1]';

.my-class {
  color: blue;
}

Drag options to blanks, or click blank then click option'

Autils

Bstyles

Csass:math

Dcolors

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import a non-built-in module without the 'sass:' prefix.

Using @import instead of @use for built-in modules.

Using @use 'sass:math'; imports the built-in math module in Sass, which helps organize functions.

2fill in blank

medium

Complete the code to use a function from the math module.

SASS

@use 'sass:math';

.my-class {
  width: math.[1](10px, 3);
}

Drag options to blanks, or click blank then click option'

Around

Bfloor

Cceil

Dpow

Attempts:

3 left

💡 Hint

Common Mistakes

Using pow which raises to a power, not rounding.

Confusing ceil or floor with round.

The round function rounds a number to the nearest integer, useful for clean CSS values.

3fill in blank

hard

Fix the error in the code by completing the blank.

SASS

@use 'sass:color';

.my-class {
  background-color: color.[1](red, $alpha: 0.5);
}

Drag options to blanks, or click blank then click option'

Aadjust-alpha

Bdarken

Clighten

Dmix

Attempts:

3 left

💡 Hint

Common Mistakes

Using darken or lighten which change brightness, not transparency.

Using mix which blends colors, not adjust alpha.

The adjust-alpha function changes the transparency (alpha) of a color, which is needed here.

4fill in blank

hard

Fill both blanks to create a map of colors with opacity adjusted.

SASS

$colors: (
  primary: color.[1](blue, $alpha: 0.8),
  secondary: color.[2](green, $alpha: 0.6)
);

Drag options to blanks, or click blank then click option'

Aadjust-alpha

Bdarken

Clighten

Dmix

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up darken and lighten functions.

Using mix which blends colors instead of adjusting alpha.

Use adjust-alpha to set opacity for both primary and secondary colors.

5fill in blank

hard

Fill all three blanks to create a responsive color scheme using modular built-ins.

SASS

$theme-colors: (
  base: color.[1](black, $alpha: 0.9),
  highlight: color.[2](yellow, $alpha: 0.7),
  shadow: color.[3](gray, $alpha: 0.5)
);

Drag options to blanks, or click blank then click option'

Aadjust-alpha

Bdarken

Clighten

Dmix

Attempts:

3 left

💡 Hint

Common Mistakes

Using adjust-alpha incorrectly for blending colors.

Confusing darken and lighten roles.

Use mix to blend black with transparency for base, darken to deepen highlight, and lighten to brighten shadow color.