Why splitting files improves maintainability in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a partial Sass file named '_buttons.scss'.

SASS

@import '[1]';

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

A_buttons.scss

Bbuttons

Cbuttons.scss

Dbuttons.css

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import statement.

Adding the '.scss' extension in the import.

Trying to import a CSS file instead of a Sass partial.

In Sass, to import a partial file, you use the filename without the underscore and extension. So '@import "buttons";' imports '_buttons.scss'.

2fill in blank

medium

Complete the code to define a variable for primary color in a separate file.

SASS

$primary-color: [1];

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

A333

Bprimary-color

Ccolor-primary

D#333

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names as values.

Omitting the '#' in the color code.

Using invalid color formats.

Variables in Sass start with a dollar sign and are assigned a value like a color code. '#333' is a valid color value.

3fill in blank

hard

Fix the error in the import statement to correctly include the '_layout.scss' partial.

SASS

@import '[1]';

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

Alayout.css

B_layout.scss

Clayout

Dlayout.scss

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import path.

Adding the '.scss' extension.

Trying to import a CSS file instead of a Sass partial.

When importing Sass partials, omit the underscore and file extension. '@import "layout";' correctly imports '_layout.scss'.

4fill in blank

hard

Fill both blanks to create a nested rule for buttons inside a container class.

SASS

.container { [1] { color: blue; } }

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

A.button

B&:hover

C& .button

D.container

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' unnecessarily in nested selectors.

Repeating the parent class inside the nested block.

Using pseudo-classes instead of child selectors.

To nest a '.button' class inside '.container', you write '.container { .button { ... } }'. The '&' is not needed here.

5fill in blank

hard

Fill all three blanks to create a map of colors and access the primary color.

SASS

$colors: ([1]: #ff0000, [2]: #00ff00, [3]: #0000ff);
.primary { color: map-get($colors, [1]); }

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

Ared

Bgreen

Cblue

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid keys like 'primary' which is not defined in the map.

Mixing up color names and hex codes.

Using quotes around keys unnecessarily.

The map keys are color names like 'red', 'green', and 'blue'. To get the primary color, use 'red' as the key in map-get.