7-1 folder pattern in depth in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main Sass file from the base folder.

SASS

@import '[1]/main';

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

Abase

Blayout

Ccomponents

Dpages

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from the components folder instead of base.

Using the wrong folder name like layout or pages.

The base folder contains foundational styles like resets and typography. Importing base/main brings these core styles into your project.

2fill in blank

medium

Complete the code to import all component partials using the 7-1 pattern.

SASS

@import '[1]/*';

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

Alayout

Bthemes

Ccomponents

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from base or layout instead of components.

Forgetting the wildcard * to import all partials.

The components folder holds reusable UI parts like buttons and cards. Importing components/* brings in all component partials.

3fill in blank

hard

Fix the error in this import statement to correctly import the layout partial.

SASS

@import '[1]layout';

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

Alayout/

Blayout-

C/layout

Dlayouts/

Attempts:

3 left

💡 Hint

Common Mistakes

Missing the slash after the folder name.

Using plural folder names incorrectly.

To import the layout folder partial, you need a slash after the folder name. layout/ correctly points to the folder.

4fill in blank

hard

Fill both blanks to create a partial import for the _variables.scss file inside the settings folder.

SASS

@import '[1]/[2]';

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

Asettings

B_variables

Cvariables

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import name.

Using the wrong folder like base instead of settings.

The settings folder holds configuration files like variables. The partial file is named _variables.scss, so you import it as variables without the underscore or extension.

5fill in blank

hard

Fill all three blanks to create a map of folder names to their purpose in the 7-1 pattern.

SASS

$folders: (
  '[1]': 'global variables and settings',
  '[2]': 'UI components like buttons',
  '[3]': 'page-specific styles'
);

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

Asettings

Bcomponents

Cpages

Dlayout

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up pages and layout folders.

Confusing components with settings.

The settings folder holds global variables and settings. components contains UI parts like buttons. pages holds styles specific to individual pages.