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

Need a 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

Need a 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

Need a 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

Need a 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.