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

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

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

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

Need a hint?

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