File architecture patterns (7-1 pattern) in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main idea behind the 7-1 pattern in Sass file architecture?

It organizes Sass files into 7 folders for different purposes plus 1 main file that imports them all. This keeps styles clean and easy to manage.

beginner

Name three of the seven folders used in the 7-1 Sass pattern.

Common folders include: base (default styles), components (small UI parts), layout (page structure).

beginner

Why is having a single main.scss file important in the 7-1 pattern?

It acts like a control center that imports all other partial files. This way, you only compile one file and keep your code organized.

intermediate

What kind of styles go into the 'abstracts' folder in the 7-1 pattern?

Helpers like variables, functions, mixins, and placeholders that are reused throughout the project.

intermediate

How does the 7-1 pattern help when working in a team?

It creates a clear, shared structure so everyone knows where to find or add styles. This reduces confusion and merge conflicts.

In the 7-1 Sass pattern, which folder typically contains variables and mixins?

A abstracts

B components

C layout

D pages

The abstracts folder holds reusable helpers like variables and mixins.

What is the purpose of the main.scss file in the 7-1 pattern?

A To write all styles in one file

B To import all partial Sass files

C To store images

D To hold JavaScript code

main.scss imports all other Sass partials to compile them together.

Which folder in the 7-1 pattern is best for styling buttons and sliders?

A base

B themes

C components

D vendors

Components folder holds small UI parts like buttons and sliders.

Why is the 7-1 pattern useful for large projects?

A It automatically writes CSS

B It reduces the number of files

C It removes the need for variables

D It organizes styles for easier maintenance

It organizes styles into clear folders, making maintenance easier.

Which folder would you use for third-party styles in the 7-1 pattern?

A vendors

B layout

C abstracts

D base

Vendors folder is for third-party or external styles.

Explain the structure and purpose of the 7 folders in the 7-1 Sass pattern.

Think about how each folder groups related styles to keep code organized.

Describe how the 7-1 pattern improves teamwork and project maintenance.

Consider how organization helps multiple people work together smoothly.