0
0
SASSmarkup~5 mins

File architecture patterns (7-1 pattern) in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The 7-1 pattern helps organize your Sass files clearly. It keeps styles easy to find and maintain.

When your project grows and you have many Sass files.
When you want to share styles with a team and keep code neat.
When you want to separate different style parts like colors, layout, and components.
When you want to avoid one big messy stylesheet.
When you want faster development by reusing style parts.
Syntax
SASS
// Folder structure example
sass/
|- abstracts/
|   |- _variables.scss    // Sass variables
|   |- _mixins.scss       // Sass mixins
|   |- _functions.scss    // Sass functions
|- base/
|   |- _reset.scss        // Reset/normalize styles
|   |- _typography.scss   // Typography rules
|- components/
|   |- _buttons.scss      // Buttons
|   |- _carousel.scss     // Carousel
|- layout/
|   |- _header.scss       // Header
|   |- _footer.scss       // Footer
|- pages/
|   |- _home.scss         // Home page styles
|- themes/
|   |- _theme.scss        // Theme styles
|- vendors/
|   |- _bootstrap.scss    // Vendor styles
|- main.scss              // Main Sass file that imports all

The underscore (_) means the file is a partial and won't compile alone.

The main.scss file imports all partials to create one CSS file.

Examples
Importing partials in main.scss to combine styles.
SASS
@import 'abstracts/variables';
@import 'base/reset';
@import 'components/buttons';
Defining variables for colors and fonts.
SASS
// abstracts/_variables.scss
$primary-color: #3498db;
$font-stack: 'Arial, sans-serif';
Button styles using variables from abstracts.
SASS
// components/_buttons.scss
.button {
  background-color: $primary-color;
  font-family: $font-stack;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  color: white;
  cursor: pointer;
}
Sample Program

This HTML uses styles compiled from the 7-1 Sass pattern. The button uses variables and styles from organized Sass files.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>7-1 Sass Pattern Example</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <header class="header">
    <h1>Welcome</h1>
  </header>
  <button class="button">Click me</button>
</body>
</html>
OutputSuccess
Important Notes

Keep your partials small and focused on one thing.

Use the 7-1 pattern to make teamwork easier and code cleaner.

Always import partials in the main.scss file in the right order.

Summary

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

This helps keep styles easy to find and maintain.

Use partials and import them in main.scss to build your CSS.