0
0
SASSmarkup~5 mins

7-1 folder pattern in depth in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The 7-1 folder pattern helps keep your Sass files organized and easy to find. It splits styles into clear sections so you can work faster and avoid confusion.

When your project has many styles and you want to keep them tidy.
When working with a team to make sure everyone knows where to put styles.
When you want to separate different parts like colors, layouts, and components.
When you want to reuse styles easily across pages.
When you want to avoid one big messy stylesheet.
Syntax
SASS
sass/
|- abstracts/
|   |- _variables.scss    // Sass variables
|   |- _mixins.scss       // Sass mixins
|   |- _functions.scss    // Sass functions
|- base/
|   |- _reset.scss        // Reset/normalize styles
|   |- _typography.scss   // Typography rules
|   |- _base.scss         // Base styles
|- components/
|   |- _buttons.scss      // Buttons
|   |- _carousel.scss     // Carousel
|   |- _modal.scss        // Modal
|- layout/
|   |- _header.scss       // Header
|   |- _footer.scss       // Footer
|   |- _sidebar.scss      // Sidebar
|   |- _grid.scss         // Grid system
|- pages/
|   |- _home.scss         // Home page styles
|   |- _about.scss        // About page styles
|- themes/
|   |- _theme.scss        // Theme styles
|- vendors/
|   |- _bootstrap.scss    // Bootstrap overrides
|- main.scss              // Main Sass file that imports all others

The folder names describe what kind of styles go inside.

Each folder has partial Sass files starting with an underscore (_).

Examples
This shows how you import partial files from different folders into your main Sass file.
SASS
@import 'abstracts/variables';
@import 'base/reset';
@import 'components/buttons';
Variables file stores colors and fonts to reuse everywhere.
SASS
// abstracts/_variables.scss
$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;
Button styles use variables from abstracts for consistent colors and fonts.
SASS
// components/_buttons.scss
.button {
  background-color: $primary-color;
  font-family: $font-stack;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
}
Sample Program

This HTML uses styles compiled from Sass files organized with the 7-1 pattern. The button uses variables and mixins from abstracts, and layout styles come from layout folder.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>7-1 Folder Pattern Example</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <header class="site-header">
    <h1>Welcome to My Site</h1>
  </header>
  <main>
    <button class="button">Click Me</button>
  </main>
  <footer class="site-footer">
    <p>Ā© 2024 My Site</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Always keep your main.scss clean by only importing partials.

Use clear folder names to help everyone understand your style structure.

Partial files start with an underscore (_) and are not compiled alone.

Summary

The 7-1 folder pattern organizes Sass files into 7 folders plus 1 main file.

This helps keep styles easy to find and maintain.

Use partial files and import them into main.scss for a clean workflow.