ITCSS methodology with SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the "Settings" layer in ITCSS using SASS.

SASS

@import '[1]/settings';

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

Autilities

Bsettings

Ccomponents

Dbase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'base' or 'components' instead of 'settings' for the import path.

Forgetting to include the folder name in the import path.

The "Settings" layer contains variables and configuration. We import it using @import 'settings/settings'; or simply @import 'settings'; if the folder is named "settings".

2fill in blank

medium

Complete the code to define a color variable in the Settings layer.

SASS

$primary-color: [1];

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

Ablue

Bprimary-color

Ccolor-primary

D#333

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names as values instead of actual color codes.

Missing the dollar sign before the variable name.

Variables in SASS are defined with a dollar sign and assigned a value like a color code. Here, $primary-color: #333; sets a dark gray color.

3fill in blank

hard

Fix the error in the code to correctly import the "Components" layer in ITCSS.

SASS

@import '[1]/component';

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

Acomponents

Bcomponent

Ccomponentss

Dcomponentes

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular 'component' instead of plural 'components'.

Misspelling the folder name.

The correct folder name is "components" (plural). Using "component" (singular) causes an error because the folder does not exist.

4fill in blank

hard

Fill both blanks to create a nested selector for a button component with a hover state in SASS.

SASS

.button [1] {
  color: $primary-color;
  [2] {
    color: $secondary-color;
  }
}

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

A&

B:hover

C.hover

D&:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.hover' instead of ':hover' for the hover state.

Not using '&' to refer to the parent selector.

In SASS, & refers to the parent selector. To style the hover state, we nest :hover inside. So .button & is just .button, and :hover inside applies hover styles.

5fill in blank

hard

Fill all three blanks to create an ITCSS import structure in SASS for Settings, Tools, and Generic layers.

SASS

@import '[1]/settings';
@import '[2]/tools';
@import '[3]/generic';

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

Asettings

Btools

Cgeneric

Dcomponents

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up folder names or using 'components' instead of the correct layer.

Incorrect order of imports.

ITCSS layers are imported by their folder names. Settings, Tools, and Generic are separate folders. So we import from 'settings', 'tools', and 'generic' respectively.