Index files for folder imports in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import all Sass files from the folder using an index file.

SASS

@use '[1]';

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

Avariables

Bstyles

Cmain

Dcomponents

Attempts:

3 left

💡 Hint

Common Mistakes

Using a file name instead of a folder name.

Forgetting to use the @use rule.

The @use rule imports the components folder via its index file.

2fill in blank

medium

Complete the code to import the index file from the 'base' folder.

SASS

@use '[1]';

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

Abase

Bbase/_index

Cbase/index

Dbase.scss

Attempts:

3 left

💡 Hint

Common Mistakes

Specifying the full file name with extension.

Using a relative path with './' unnecessarily.

Using @use 'base'; imports the _index.scss file inside the base folder automatically.

3fill in blank

hard

Fix the error in the import statement to correctly use the index file from the 'theme' folder.

SASS

@use '[1]';

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

Atheme/index.scss

Btheme.scss

Ctheme

Dtheme/_index.scss

Attempts:

3 left

💡 Hint

Common Mistakes

Including the file extension in the import path.

Trying to import the index file explicitly.

Simply using @use 'theme'; imports the index file inside the theme folder correctly.

4fill in blank

hard

Fill both blanks to create an index file that imports 'reset' and 'typography' partials.

SASS

@use '[1]';
@use '[2]';

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

Areset

Btypography

Cbase

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import path.

Using folder names instead of partial names.

The index file imports the partials _reset.scss and _typography.scss using @use.

5fill in blank

hard

Fill all three blanks to create an index file that imports 'colors', 'buttons', and 'layout' partials.

SASS

@use '[1]';
@use '[2]';
@use '[3]';

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

Acolors

Bbuttons

Clayout

Dtheme

Attempts:

3 left

💡 Hint

Common Mistakes

Including underscores or file extensions.

Using folder names instead of partial names.

The index file imports the partials _colors.scss, _buttons.scss, and _layout.scss using @use.