Partial files with underscore prefix in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do Sass partial files start with an underscore?

In Sass, partial files often start with an underscore (e.g., _variables.scss). What is the main reason for this naming convention?

A It marks the file as a backup copy.

B It makes the file load faster in the browser.

C It tells Sass not to compile this file directly into CSS.

D It changes the file's syntax to CSS instead of Sass.

💡 Hint

Think about how Sass handles files when compiling.

Sass uses the underscore prefix to identify partial files. These files are not compiled into separate CSS files but are meant to be included in other Sass files.

📝 Syntax

intermediate

Importing a Sass partial file

Given a partial file named _mixins.scss, which import statement correctly includes it in styles.scss?

SASS

/* styles.scss */
@import ???;

A @import '_mixins';

B @import 'mixins';

C @import 'mixins.scss';

D @import '_mixins.scss';

💡 Hint

When importing, you don't need to include the underscore or file extension.

Sass allows importing partials by their name without the underscore or file extension. So '@import 'mixins';' correctly imports '_mixins.scss'.

❓ rendering

advanced

Output CSS from partial files

If you have two Sass files: _reset.scss and main.scss which imports _reset.scss, what CSS files will be generated after compiling?

A Only <code>main.css</code> will be generated.

B Both <code>_reset.css</code> and <code>main.css</code> will be generated.

C Only <code>_reset.css</code> will be generated.

D No CSS files will be generated.

💡 Hint

Remember what the underscore means for partial files.

Partial files starting with an underscore are not compiled into CSS files on their own. Only the main file that imports them is compiled into CSS.

❓ selector

advanced

Using partials to organize selectors

You have a partial file _buttons.scss with styles for buttons. How should you organize your Sass files to keep your project clean and maintainable?

A Put all button styles in <code>_buttons.scss</code> and import it into a main file.

B Create a CSS file named <code>buttons.css</code> and link it separately in HTML.

C Write button styles directly in the main CSS file without partials.

D Use inline styles in HTML for buttons instead of Sass.

💡 Hint

Think about how partials help organize code.

Using partials like '_buttons.scss' helps keep styles modular and easier to manage. Importing them into a main Sass file keeps the project organized.

❓ accessibility

expert

Accessibility considerations when using Sass partials

When using Sass partials to style components, what is an important accessibility practice to keep in mind?

A Write all styles in one file to avoid missing accessibility rules.

B Use partials only for layout, not for colors or fonts.

C Avoid using variables in partials to prevent confusion.

D Ensure color variables in partials meet contrast standards for readability.

💡 Hint

Accessibility often involves color contrast and readability.

Using variables in partials for colors helps maintain consistent and accessible color contrast across the site, improving readability for all users.

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