7-1 folder pattern in depth in SASS - Mini Project: Build & Apply

7-1 Folder Pattern in Depth with Sass

📖 Scenario: You are working on a website project and want to organize your Sass files neatly. The 7-1 folder pattern helps keep your styles easy to find and maintain by grouping them into seven folders and one main file.

🎯 Goal: Build a Sass folder structure using the 7-1 pattern with partial files for base, components, layout, pages, themes, abstracts, and vendors, and import them all into a main style.scss file.

📋 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, _header.scss, _home.scss, _dark.scss, _variables.scss, and _bootstrap.scss respectively

In each partial file, add a simple comment describing the folder purpose

Create a main style.scss file that imports all these partials using the correct relative paths

Use the Sass @use rule for imports

💡 Why This Matters

🌍 Real World

Organizing Sass files with the 7-1 pattern is a common practice in real web projects to keep styles modular, maintainable, and scalable.

💼 Career

Front-end developers and UI engineers often use this pattern to collaborate efficiently and manage large CSS codebases.

1

Create the 7 folders and partial files

Create seven folders named base, components, layout, pages, themes, abstracts, and vendors. Inside each folder, create one partial Sass file with these exact names and add a comment describing the folder purpose: base/_base.scss, components/_buttons.scss, layout/_header.scss, pages/_home.scss, themes/_dark.scss, abstracts/_variables.scss, vendors/_bootstrap.scss.

SASS

# Create folders and partial files with comments inside
// Your code here

Hint

Each folder should have exactly one partial file starting with an underscore and ending with .scss. Add a comment inside each file describing its purpose.

2

Create the main style.scss file

Create a main Sass file named style.scss in the root folder. This file will import all the partial files from the seven folders using the Sass @use rule with the correct relative paths.

SASS

// base/_base.scss
// Base styles like resets and typography

// components/_buttons.scss
// Button styles and components

// layout/_header.scss
// Header layout styles

// pages/_home.scss
// Home page specific styles

// themes/_dark.scss
// Dark theme styles

// abstracts/_variables.scss
// Sass variables and mixins

// vendors/_bootstrap.scss
// Third-party vendor styles like Bootstrap

// Create style.scss and add @use imports here
// Your code here

Hint

Use the @use rule with the folder and partial file names without the underscore or file extension. For example, @use "base/base";.

3

Add a variable in _variables.scss and use it in _buttons.scss

In abstracts/_variables.scss, create a Sass variable named $primary-color and set it to #3498db. Then, in components/_buttons.scss, use this variable to set the background color of a button class named .btn-primary.

SASS

// abstracts/_variables.scss
// Sass variables and mixins

// Add $primary-color variable here
// Your code here

// components/_buttons.scss
// Button styles and components

// Use $primary-color for .btn-primary background
// Your code here

Hint

Define $primary-color in _variables.scss and reference it in _buttons.scss using the namespace from @use "abstracts/variables" which is variables.$primary-color.

4

Use the variable in style.scss and complete the import order

In style.scss, ensure the import order starts with @use "abstracts/variables" first, so variables are available to other files. Then import the other partials in this order: base, components, layout, pages, themes, and vendors. Confirm the variable $primary-color is used correctly in the .btn-primary class.

SASS

// style.scss
// Ensure @use "abstracts/variables" is first
// Then import base, components, layout, pages, themes, vendors
// Your code here

Hint

The @use "abstracts/variables" must be the first import in style.scss so other files can use the variables. The .btn-primary class uses variables.$primary-color for background color.

Practice

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

easy

A. To reduce the size of CSS files by compressing them

B. To organize Sass files into 7 folders plus 1 main file for better structure

C. To automatically generate CSS without writing any Sass code

D. To create 7 different CSS themes from one Sass file

Solution

1. Step 1: Understand the folder pattern concept

   The 7-1 pattern divides Sass files into 7 specific folders and 1 main file to keep code organized.

2. Step 2: Identify the main goal of this structure

   This organization helps developers find and maintain styles easily, improving workflow.

3. Final Answer:

   To organize Sass files into 7 folders plus 1 main file for better structure -> Option B

4. Quick Check:

   7-1 pattern = organized folders + main file [OK]

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

Common Mistakes:

• Thinking it compresses CSS automatically
• Believing it creates themes without extra code
• Confusing it with CSS frameworks

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

easy

A. @import 'buttons';

B. @import '_buttons.scss';

C. @import 'buttons.scss';

D. @import 'buttons/_buttons';

Solution

1. Step 1: Recall Sass partial import syntax

   Partial files start with an underscore and are imported without the underscore or file extension.

2. Step 2: Apply correct import syntax

   So, _buttons.scss is imported as @import 'buttons'; in main.scss.

3. Final Answer:

   @import 'buttons'; -> Option A

4. Quick Check:

   Import partials without underscore or extension [OK]

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

Common Mistakes:

• Including underscore in import statement
• Adding .scss extension in import
• Using folder path incorrectly

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

medium

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

B. Only the styles from main.scss will be compiled, ignoring imports

C. A syntax error will occur because folder names cannot be used in imports

D. The compiler will create separate CSS files for each imported partial

Solution

1. Step 1: Understand how imports work in Sass

   When you import partials in main.scss, their styles are combined into one CSS output.

2. Step 2: Analyze the import paths

   Using folder names like abstracts/variables is valid and imports the partial correctly.

3. Final Answer:

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

4. Quick Check:

   Imports merge partials into one CSS [OK]

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

Common Mistakes:

• Thinking imports create separate CSS files
• Believing folder names are invalid in imports
• Assuming imports are ignored during compilation

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

medium

A. Sass does not support nested folders in imports

B. You should import as @import 'layout/_grid.scss'; including underscore and extension

C. The main.scss file must be inside the layout folder

D. The file _grid.scss is missing from the layout folder

Solution

1. Step 1: Check the error message

   The error says the file layout/_grid.scss cannot be found or read.

2. Step 2: Understand import rules

   Importing @import 'layout/grid'; expects a file named _grid.scss inside the layout folder.

3. Final Answer:

   The file _grid.scss is missing from the layout folder -> Option D

4. Quick Check:

   Missing partial file causes import error [OK]

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

Common Mistakes:

• Including underscore and extension in import
• Moving main.scss into partial folders
• Assuming Sass disallows folder nesting

5. In the 7-1 folder pattern, you want to add a new component style for a card UI element. Where should you place the partial file and how should you import it in main.scss?

hard

A. Place _card.scss in the root sass folder and import with @import 'card';

B. Place _card.scss in the base folder and import with @import 'base/card';

C. Place _card.scss in the components folder and import with @import 'components/card';

D. Place _card.scss in the abstracts folder and import with @import 'abstracts/card';

Solution

1. Step 1: Identify the correct folder for UI components

   The 7-1 pattern uses the components folder for UI parts like buttons, cards, and modals.

2. Step 2: Use proper import syntax in main.scss

   Place _card.scss inside components and import as @import 'components/card';.

3. Final Answer:

   Place _card.scss in components folder and import with @import 'components/card'; -> Option C

4. Quick Check:

   UI parts go in components folder [OK]

Hint: Put UI parts in components folder, import with folder/name [OK]

Common Mistakes:

• Putting components in base or abstracts folders
• Importing with underscore or .scss extension
• Placing partials outside organized folders