Partial files with underscore prefix in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

SASS

@import '[1]';

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

Acolors

B_colors.scss

Ccolors.scss

D_colors

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import path.

Including the '.scss' extension in the import path.

When importing Sass partials, you omit the underscore and the file extension. So '@import "colors";' correctly imports '_colors.scss'.

2fill in blank

medium

Complete the code to import the partial '_variables.scss' in your main Sass file.

SASS

@import '[1]';

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

Avariables

B_variables.scss

Cvariables.scss

D_variables

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the underscore before the file name.

Including the '.scss' extension.

To import a Sass partial, you only write the file name without the underscore and extension. '@import "variables";' imports '_variables.scss'.

3fill in blank

hard

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

SASS

@import '[1]';

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

A_mixins.scss

Bmixins.scss

Cmixins

D_mixins

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import path.

Including the '.scss' extension.

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

4fill in blank

hard

Fill both blanks to import two partials '_reset.scss' and '_base.scss' in one statement.

SASS

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

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

Areset

B_reset

Cbase

D_base

Attempts:

3 left

💡 Hint

Common Mistakes

Including underscores in the import names.

Including '.scss' extensions.

When importing multiple Sass partials, omit underscores and extensions. '@import "reset", "base";' imports '_reset.scss' and '_base.scss'.

5fill in blank

hard

Fill all three blanks to import '_typography.scss', '_layout.scss', and '_theme.scss' partials correctly.

SASS

@import '[1]', '[2]', '[3]';

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

Atypography

Blayout

Ctheme

D_theme

Attempts:

3 left

💡 Hint

Common Mistakes

Including underscores in any of the file names.

Including '.scss' extensions.

Not separating file names with commas.

To import multiple Sass partials, list their names without underscores or extensions. '@import "typography", "layout", "theme";' imports '_typography.scss', '_layout.scss', and '_theme.scss'.

Practice

1. What is the main purpose of starting a Sass file name with an underscore (e.g., _variables.scss)?

easy

A. To mark it as a partial file that won't compile to a separate CSS file

B. To make the file load faster in the browser

C. To indicate the file contains only variables

D. To hide the file from the Sass compiler

Solution

1. Step 1: Understand Sass partial naming

   Files starting with an underscore are called partials and are not compiled into separate CSS files.

2. Step 2: Purpose of partial files

   They are meant to be imported into other Sass files to organize code without creating extra CSS files.

3. Final Answer:

   To mark it as a partial file that won't compile to a separate CSS file -> Option A

4. Quick Check:

   Partial files start with underscore = no separate CSS file [OK]

Hint: Underscore means partial, no separate CSS file generated [OK]

Common Mistakes:

• Thinking underscore hides the file from compiler
• Assuming underscore means only variables inside
• Believing underscore speeds up browser loading

2. Which of the following is the correct way to import a partial Sass file named _mixins.scss into another Sass file?

easy

A. @import _mixins.scss;

B. ;sscs.snixim_ tropmi@

C. @import 'mixins';

D. @import mixins.scss;

Solution

1. Step 1: Understand import syntax for partials

   When importing partials, omit the underscore and file extension.

2. Step 2: Apply correct import format

   So to import _mixins.scss, write @import 'mixins'; without underscore or extension.

3. Final Answer:

   @import 'mixins'; -> Option C

4. Quick Check:

   Import partials without underscore or extension [OK]

Hint: Import partials without underscore or .scss extension [OK]

Common Mistakes:

• Including underscore in import path
• Adding .scss extension in import
• Using incorrect quotes or syntax

3. Given these files:
_colors.scss contains:

$primary-color: blue;

main.scss contains:

@import 'colors';
body { color: $primary-color; }

What will be the color of the text in the compiled CSS?

medium

A. red

B. blue

C. black

D. Error: Undefined variable

Solution

1. Step 1: Check variable definition in partial

   The _colors.scss file defines $primary-color: blue;.

2. Step 2: Confirm import and usage in main.scss

   Main file imports colors partial and uses $primary-color in body color.

3. Final Answer:

   blue -> Option B

4. Quick Check:

   Imported variable used correctly = blue text [OK]

Hint: Imported variables from partials are usable in main file [OK]

Common Mistakes:

• Forgetting to import partial
• Using variable before import
• Expecting partial to generate separate CSS

4. You have a partial file named _buttons.scss but when you compile your main Sass file, styles from _buttons.scss are missing. What is the most likely cause?

medium

A. You need to rename the file to buttons.css

B. The partial file name should not start with an underscore

C. Sass does not support partial files

D. You forgot to import buttons partial in the main Sass file

Solution

1. Step 1: Check partial file naming

   Partial files must start with underscore; _buttons.scss is correct.

2. Step 2: Verify import statement in main file

   If styles are missing, likely the partial was not imported using @import 'buttons';.

3. Final Answer:

   You forgot to import buttons partial in the main Sass file -> Option D

4. Quick Check:

   Missing import = missing styles [OK]

Hint: Always import partials in main file to include their styles [OK]

Common Mistakes:

• Removing underscore from partial filename
• Expecting partials to compile alone
• Renaming partial to .css instead of .scss

5. You want to organize your Sass project with multiple partials: _reset.scss, _typography.scss, and _layout.scss. How should you structure your main Sass file to compile all styles into one CSS file?

hard

A. @import 'reset';
@import 'typography';
@import 'layout';

B. @import _reset.scss;
@import _typography.scss;
@import _layout.scss;

C. @import reset.scss;
@import typography.scss;
@import layout.scss;

D. @import 'reset' 'typography' 'layout';

Solution

1. Step 1: Understand import syntax for multiple partials

   Each partial is imported separately without underscore or extension.

2. Step 2: Write imports correctly in main file

   Use separate @import statements for each partial: @import 'reset';, @import 'typography';, @import 'layout';.

3. Final Answer:

   @import 'reset'; @import 'typography'; @import 'layout'; -> Option A

4. Quick Check:

   Separate imports without underscore or extension [OK]

Hint: Import each partial separately without underscore or .scss [OK]

Common Mistakes:

• Including underscore or .scss in import
• Trying to import multiple files in one statement with commas
• Renaming partials to .css files