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.

Practice

1. Why is splitting Sass files into smaller parts helpful for maintainability?

easy

A. It makes the CSS load slower in browsers.

B. It keeps code organized and easier to update.

C. It prevents Sass from compiling correctly.

D. It increases the file size unnecessarily.

Solution

1. Step 1: Understand code organization benefits

   Splitting files groups related styles, making the code easier to find and manage.

2. Step 2: Recognize maintainability improvements

   Smaller files reduce errors and speed up updates because you work on focused parts.

3. Final Answer:

   It keeps code organized and easier to update. -> Option B

4. Quick Check:

   Organized code = easier updates [OK]

Hint: Think: smaller files mean simpler, safer changes [OK]

Common Mistakes:

• Confusing file splitting with performance issues
• Believing splitting causes compilation errors
• Thinking bigger files are easier to manage

2. Which Sass syntax correctly includes another file for better maintainability?

easy

A. @use 'variables';

B. @include 'variables';

C. @import 'variables';

D. @require 'variables';

Solution

1. Step 1: Identify the modern Sass inclusion syntax

   @use is the recommended way to include and share variables, mixins, and functions.

2. Step 2: Compare with other options

   @import is deprecated, @include is for mixins, and @require is invalid syntax.

3. Final Answer:

   @use 'variables'; -> Option A

4. Quick Check:

   @use is modern inclusion [OK]

Hint: Remember: @use replaces old @import [OK]

Common Mistakes:

• Using @import which is deprecated
• Confusing @include with file inclusion
• Trying invalid @require syntax

3. Given these Sass files, what color will the button have?

@use 'colors';

.button {
  background-color: colors.$primary;
}

And _colors.scss contains:

$primary: #3498db;

medium

A. #3498db

B. #000000

C. red

D. transparent

Solution

1. Step 1: Understand @use imports variables with namespace

   The variable $primary is accessed as colors.$primary because of @use 'colors'.

2. Step 2: Check the value of $primary in _colors.scss

   $primary is set to #3498db, so the button background color will be this blue shade.

3. Final Answer:

   #3498db -> Option A

4. Quick Check:

   Namespace + variable value = #3498db [OK]

Hint: Namespace variables with @use like module.variable [OK]

Common Mistakes:

• Forgetting the namespace prefix
• Assuming default color without checking variable
• Confusing @use with @import behavior

4. What is wrong with this Sass code that tries to split files?

// main.scss
@use 'buttons';

// _buttons.scss
.button {
  color: $text-color;
}

Assuming $text-color is defined in _variables.scss but not imported.

medium

A. The .button selector is invalid without nesting.

B. Using @use instead of @import causes syntax error.

C. Variables cannot be shared between files in Sass.

D. Missing @use 'variables' in _buttons.scss causes undefined variable error.

Solution

1. Step 1: Identify variable scope in Sass modules

   Variables must be imported with @use in each file that uses them; they are not global.

2. Step 2: Check the missing import in _buttons.scss

   Since $text-color is defined in _variables.scss but not imported in _buttons.scss, it causes an undefined variable error.

3. Final Answer:

   Missing @use 'variables' in _buttons.scss causes undefined variable error. -> Option D

4. Quick Check:

   Variables need explicit @use in each file [OK]

Hint: Always @use variables in every file that needs them [OK]

Common Mistakes:

• Assuming variables are global without import
• Confusing @use and @import syntax errors
• Thinking selectors need nesting to be valid

5. You want to split your Sass code into _variables.scss, _mixins.scss, and _buttons.scss. Which approach best improves maintainability and avoids duplication?

hard

A. Write all styles in one big file to avoid confusion.

B. Import all files directly in main.scss using @import for faster compilation.

C. Use @use 'variables' and @use 'mixins' inside _buttons.scss, then @use 'buttons' in main.scss.

D. Use @include to add variables and mixins inside _buttons.scss.

Solution

1. Step 1: Understand modular Sass with @use

   Each partial file should import its dependencies with @use to keep scope clear and avoid duplication.

2. Step 2: Structure imports for maintainability

   _buttons.scss uses variables and mixins, so it should @use both. Then main.scss only needs to @use buttons.

3. Final Answer:

   Use @use 'variables' and @use 'mixins' inside _buttons.scss, then @use 'buttons' in main.scss. -> Option C

4. Quick Check:

   Modular @use inside partials = best maintainability [OK]

Hint: Let partials @use their needs; main imports only top-level [OK]

Common Mistakes:

• Using deprecated @import instead of @use
• Putting all code in one file
• Misusing @include for file imports