Component-based file organization in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the variables file in Sass.

SASS

@use '[1]';

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

Avariables

Bmixins

Creset

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Using @import instead of @use

Including the underscore or file extension in the import path

The @use rule imports the variables file so you can use its variables.

2fill in blank

medium

Complete the code to include the mixins file in your main Sass file.

SASS

@use '[1]';

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

Athemes

Butilities

Ccomponents

Dmixins

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import a file that does not exist

Using @import instead of @use

The @use rule imports the mixins file so you can use its mixin functions.

3fill in blank

hard

Fix the error in the import statement for the base styles file.

SASS

@use '[1]';

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

Abase

B_base.scss

Cbase.scss

Dstyles/base

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import path

Including the file extension

When using @use, omit the underscore and file extension. Just use base.

4fill in blank

hard

Fill both blanks to create a component partial and import it correctly.

SASS

// In components/_button.scss
.button {
  background-color: [1];
}

// In main.scss
@use '[2]';

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

A$primary-color

Bcomponents/button

Ccomponents/buttons

D$secondary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable for color

Including underscore or extension in import path

The button component uses the $primary-color variable. The import path is components/button without underscore or extension.

5fill in blank

hard

Fill all three blanks to create a utility partial, use a mixin, and import it properly.

SASS

// In utilities/_spacing.scss
@mixin [1]($size) {
  margin: $size;
}

// In main.scss
@use '[2]';

.container {
  @include utilities.[3](1rem);
}

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

Aspacing

Butilities

Dmixins

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong mixin name

Incorrect import path

Calling mixin without namespace

The mixin is named spacing. The utilities partial is imported with @use 'utilities';. The mixin is called as utilities.spacing.