File architecture patterns (7-1 pattern) in SASS - Mini Project: Build & Apply

Organize a Sass Project Using the 7-1 Pattern

📖 Scenario: You are working on a website's styles. To keep your Sass files neat and easy to manage, you want to organize them using the popular 7-1 pattern. This pattern splits styles into seven folders and one main file that brings them all together.

🎯 Goal: Create a Sass file structure using the 7-1 pattern with the main main.scss file importing partials from the seven folders.

📋 What You'll Learn

Create seven folders named base, components, layout, pages, themes, abstracts, and vendors

Inside each folder, create one partial Sass file with the exact name: _base.scss, _buttons.scss, _layout.scss, _home.scss, _themes.scss, _variables.scss, and _bootstrap.scss respectively

Create a main Sass file named main.scss that imports all these partials using the @use rule

Use the exact import paths matching the folder and partial names

💡 Why This Matters

🌍 Real World

Organizing Sass files with the 7-1 pattern helps teams keep styles clean and easy to maintain in real projects.

💼 Career

Many front-end developer roles expect you to know how to structure Sass or CSS files professionally for scalability.

1

Create the folder structure and partial files

Create seven folders named base, components, layout, pages, themes, abstracts, and vendors. Inside each folder, create one partial Sass file with the exact names: _base.scss in base, _buttons.scss in components, _layout.scss in layout, _home.scss in pages, _themes.scss in themes, _variables.scss in abstracts, and _bootstrap.scss in vendors. Each partial file should be empty for now.

SASS

# Create folders and empty partial files as described

Hint

Think of each folder as a drawer for a type of styles. The partial files start with an underscore and have the exact names given.

2

Create the main Sass file main.scss

Create a file named main.scss in the root folder. This file will be used to import all the partial Sass files from the seven folders.

SASS

// Folder structure:
// base/_base.scss
// components/_buttons.scss
// layout/_layout.scss
// pages/_home.scss
// themes/_themes.scss
// abstracts/_variables.scss
// vendors/_bootstrap.scss

// Create main.scss file here

Hint

Use the @use rule with the folder and partial names without the underscore or file extension.

3

Add a variable in _variables.scss

Open the file abstracts/_variables.scss and create a Sass variable named $primary-color with the value #3498db.

SASS

// Folder structure:
// base/_base.scss
// components/_buttons.scss
// layout/_layout.scss
// pages/_home.scss
// themes/_themes.scss
// abstracts/_variables.scss
// vendors/_bootstrap.scss

// main.scss
@use "abstracts/variables";
@use "base/base";
@use "components/buttons";
@use "layout/layout";
@use "pages/home";
@use "themes/themes";
@use "vendors/bootstrap";

// Add $primary-color variable in abstracts/_variables.scss

Hint

Variables in Sass start with a dollar sign $. Write $primary-color: #3498db; exactly.

4

Use the variable in _buttons.scss

Open the file components/_buttons.scss and create a CSS rule for a class named .btn-primary that sets the background-color to the variable variables.$primary-color using the @use namespace.

SASS

// Folder structure:
// base/_base.scss
// components/_buttons.scss
// layout/_layout.scss
// pages/_home.scss
// themes/_themes.scss
// abstracts/_variables.scss
// vendors/_bootstrap.scss

// abstracts/_variables.scss
$primary-color: #3498db;

// main.scss
@use "abstracts/variables";
@use "base/base";
@use "components/buttons";
@use "layout/layout";
@use "pages/home";
@use "themes/themes";
@use "vendors/bootstrap";

// Add .btn-primary rule in components/_buttons.scss

Hint

Remember to import variables with @use "abstracts/variables"; and use the namespace variables.$primary-color inside the rule.

Practice

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

easy

A. To organize Sass files into 7 folders and 1 main file for better maintainability

B. To reduce the size of CSS files by minifying them

C. To automatically generate JavaScript files from Sass

D. To combine all CSS files into one without folders

Solution

1. Step 1: Understand the 7-1 pattern structure

   The 7-1 pattern divides Sass files into 7 folders for different style parts and 1 main file to import them.

2. Step 2: Identify the purpose of this organization

   This structure helps keep styles easy to find, maintain, and scale in projects.

3. Final Answer:

   To organize Sass files into 7 folders and 1 main file for better maintainability -> Option A

4. Quick Check:

   7-1 pattern = organize files [OK]

Hint: Remember 7 folders + 1 main file = organized Sass [OK]

Common Mistakes:

• Thinking it minifies CSS
• Confusing with JavaScript generation
• Assuming it merges CSS without folders

2. Which of the following is the correct way to import a partial named _buttons.scss in the main main.scss file using the 7-1 pattern?

easy

A. @import '_buttons.scss';

B. @import 'buttons/_buttons';

C. @import 'buttons.scss';

D. @import 'buttons';

Solution

1. Step 1: Recall Sass partial import rules

   When importing partials, omit the underscore and file extension in the import statement.

2. Step 2: Apply to _buttons.scss

   So, to import _buttons.scss, write @import 'buttons'; in main.scss.

3. Final Answer:

   @import 'buttons'; -> Option D

4. Quick Check:

   Omit underscore and extension in imports [OK]

Hint: Drop underscore and .scss when importing partials [OK]

Common Mistakes:

• Including underscore in import
• Adding .scss extension
• Using wrong folder path syntax

3. Given this folder structure in the 7-1 pattern:
sass/
├── abstracts/_variables.scss
├── base/_reset.scss
├── components/_buttons.scss
└── main.scss
And main.scss contains:
@import 'abstracts/variables';
@import 'base/reset';
@import 'components/buttons';
What will happen when you compile main.scss?

medium

A. All styles from variables, reset, and buttons partials are combined into one CSS file

B. Only the styles from main.scss are compiled, ignoring partials

C. Compilation fails due to missing underscores in import

D. CSS file is created but empty because partials are not linked

Solution

1. Step 1: Understand import behavior in Sass

   Importing partials in main.scss includes their styles in the compiled CSS output.

2. Step 2: Check import syntax and file names

   Imports correctly reference partials without underscores, so Sass finds and includes them.

3. Final Answer:

   All styles from variables, reset, and buttons partials are combined into one CSS file -> Option A

4. Quick Check:

   Imports combine partials into CSS [OK]

Hint: Imports merge partials into one CSS file [OK]

Common Mistakes:

• Thinking underscores must be in import
• Assuming partials compile separately
• Believing empty CSS if partials imported

4. You have this import in main.scss:
@import 'layout/grid';
But compiling gives an error: File to import not found or unreadable: layout/_grid.scss.
What is the most likely cause?

medium

A. You must include the underscore in the import statement

B. The file _grid.scss is missing inside the layout folder

C. The main.scss file is not saved

D. Sass does not support nested folders in imports

Solution

1. Step 1: Understand Sass import error

   The error means Sass cannot find the partial file _grid.scss inside the layout folder.

2. Step 2: Check file existence

   Most likely, the file is missing or misnamed, causing the import to fail.

3. Final Answer:

   The file _grid.scss is missing inside the layout folder -> Option B

4. Quick Check:

   Missing partial file causes import error [OK]

Hint: Check if partial file exists in folder before importing [OK]

Common Mistakes:

• Including underscore in import path
• Ignoring file save status
• Assuming Sass can't import from folders

5. In the 7-1 pattern, you want to add a new folder themes for different color themes. How should you update your main.scss to include a partial _dark.scss inside themes without breaking the pattern?

hard

A. @import 'dark'; // Import without folder path

B. @import '_dark.scss'; // Import partial directly without folder

C. @import 'themes/dark'; // Add import in main.scss to include theme styles

D. Create a new main file inside themes and import it separately

Solution

1. Step 1: Follow 7-1 pattern folder structure

   Adding a new folder themes fits the pattern as an additional folder for partials.

2. Step 2: Import partial correctly in main.scss

   Use @import 'themes/dark'; to import _dark.scss inside themes folder, omitting underscore and extension.

3. Final Answer:

   @import 'themes/dark'; // Add import in main.scss to include theme styles -> Option C

4. Quick Check:

   Import partial with folder path, no underscore [OK]

Hint: Import new folder partials with folder name + partial name [OK]

Common Mistakes:

• Importing partial without folder path
• Including underscore in import
• Creating separate main files breaking pattern