File architecture patterns (7-1 pattern) in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the 7-1 pattern folder structure

In the 7-1 Sass architecture pattern, how many folders are typically used to organize Sass files (excluding the main entry file)?

A 8 folders

B 1 folder

C 6 folders

D 7 folders

💡 Hint

Think about the name '7-1' and what it represents in folder organization.

The '7-1' pattern uses 7 folders to organize Sass partials and 1 main file that imports them all. This helps keep styles modular and maintainable.

📝 Syntax

intermediate

Correct import syntax in main.scss

Which import statement correctly imports the '_buttons.scss' partial from the 'components' folder in the 7-1 pattern inside 'main.scss'?

SASS

@import 'components/buttons';

A @import 'components/buttons';

B @import 'components/_buttons.scss';

C @import 'buttons';

D @import 'components/buttons.scss';

💡 Hint

Remember Sass partials start with underscore and you omit it and the extension when importing.

In Sass, when importing partials, you omit the underscore and file extension. So '@import 'components/buttons';' correctly imports '_buttons.scss' from the components folder.

❓ layout

advanced

Visualizing the 7-1 folder structure

Which folder below is NOT part of the standard 7 folders in the 7-1 Sass pattern?

A components

B utilities

C widgets

D base

💡 Hint

Recall the common folder names like base, components, utilities, but not 'widgets'.

The standard 7 folders are base, components, layout, pages, themes, abstracts (or utilities), and vendors. 'Widgets' is not a standard folder in the 7-1 pattern.

❓ accessibility

advanced

Accessibility considerations in Sass architecture

How can the 7-1 Sass pattern help improve accessibility in a large project?

A It automatically adds ARIA attributes to HTML elements.

B By separating styles into logical folders, it helps developers maintain consistent focus and state styles for accessibility.

C It enforces color contrast ratios through folder naming.

D It disables animations globally to reduce motion sickness.

💡 Hint

Think about how organization helps developers write better accessible styles.

The 7-1 pattern organizes styles so developers can easily find and maintain focus, hover, and other state styles that improve accessibility. It does not add ARIA or enforce contrast automatically.

🧠 Conceptual

expert

Why use the 7-1 pattern in large Sass projects?

What is the main advantage of using the 7-1 Sass architecture pattern in large projects?

A It improves code maintainability by separating concerns into dedicated folders and files.

B It forces all styles to be written in one file to avoid conflicts.

C It allows Sass to compile faster by limiting the number of files.

D It reduces the final CSS file size by compressing styles automatically.

💡 Hint

Think about how organizing code helps teams work better and avoid confusion.

The 7-1 pattern helps keep styles modular and organized, making it easier to maintain and scale large projects. It does not compress or speed up compilation by itself.