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.