File architecture patterns (7-1 pattern) in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main variables file in Sass.

SASS

@use '[1]/variables';

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

Abase

Bstyles

Ccomponents

Dutils

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong folder name like 'components' or 'utils' for variables import.

The base folder usually contains foundational files like variables in the 7-1 pattern.

2fill in blank

medium

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

SASS

@use '[1]/*';

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

Apages

Bcomponents

Clayout

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'components' with 'layout' or 'pages' folders.

The components folder holds reusable UI parts, so importing all partials from there is common.

3fill in blank

hard

Fix the error in the import statement for layout partials in the 7-1 pattern.

SASS

@use '[1]/header';

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

Alayout

Bcomponents

Cpages

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Importing header from 'components' or 'pages' instead of 'layout'.

The layout folder contains structural parts like header and footer in the 7-1 pattern.

4fill in blank

hard

Fill both blanks to create a Sass map of page names and their main partial files.

SASS

$pages: ([1]: '_home', [2]: '_about');

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

Ahome

Bcontact

Cabout

Dservices

Attempts:

3 left

💡 Hint

Common Mistakes

Using page names that don't match the partial files or mixing keys and values.

The keys in the map represent page names like 'home' and 'about' matching their partial files.

5fill in blank

hard

Fill all three blanks to write a Sass import statement for utility functions, mixins, and variables.

SASS

@use '[1]/functions';
@use '[2]/mixins';
@use '[3]/variables';

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

Autils

Bhelpers

Cbase

Dtools

Attempts:

3 left

💡 Hint

Common Mistakes

Putting variables in utils or functions in base folder.

Utility functions and mixins are usually in the utils folder, while variables are in base.