Published on

SCSS Architecture (7-1)

Authors

The 7-1 SCSS architecture refers to a structure comprising 7 different folders and 1 main file. The main idea is to have a solid, maintainable, and scalable structure for your stylesheets, ensuring your code is organized and your styles are easy to manage.

7 Folders and Their Roles

The 7-1 pattern organizes SCSS files into seven different folders, each serving a specific purpose:

  1. Base: The base folder contains the boilerplate content for the project. It includes resets, typography rules (like fonts), and standard element definitions. This is where you'd put your base and helper styles.

  2. Components: This folder includes individual components, sometimes referred to as modules. Buttons, sliders, loaders, or similar discrete, reusable parts of the interface live here.

  3. Layout: Here, you'd place styles for larger layout components, such as headers, footers, grids, and sections. This folder essentially contains styles for the main sections of the layout, the macro components, if you will.

  4. Pages: This folder contains page-specific styles. If you have a home page with unique styles, they belong here.

  5. Themes: If your website or application has different themes, or if you want to style it differently for occasions, the styles go into this folder.

  6. Abstracts: The abstracts folder is home to the less tangible code in your project. This includes variables, mixins, and functions - any code that doesn't output CSS when compiled.

  7. Vendors: This folder is dedicated to third-party CSS. It's for including stylesheets from external libraries and dependencies, like Bootstrap or jQuery UI.

However, I rarely utilize this exact format. I use this as a reference for my SCSS architecture. I have found that the following structure works best for me.

F-shape scanning pattern
F-shape scanning pattern

Light & Dark Mode Setup

Below I have my project set up so that light mode and darkmode is extremly effieicent and easy to maintain. This method allows you to also incorporate other themes into your project very easily.

The CSS custom properties are defined using the -- prefix and the #{$key} variable, which represents the name of the color value. The #{$submap} variable represents the value of the color. The --#{$key}: #{$submap}; line defines the CSS custom property with the name --{key} and the value #{submap}.

root.scss
@import url("https://rsms.me/inter/inter.css");
@import "variables";
@import "./colors.scss";

:root {
  @each $theme, $map in $themes {
    .theme--#{$theme} {
      @each $key, $submap in $map {
        --#{$key}: #{$submap};
      }
    }
  }
}

The $themes variable here is expected to be a map (in SCSS, maps are like associative arrays or hash maps in other languages) where each key is a theme name (like 'dark' or 'light'), and each value is another map of CSS property-value pairs for that theme.

The outer @each loop iterates over each theme in $themes. For each theme, it creates a CSS class called .theme--[theme name] where [theme name] is replaced with the name of the theme.

The inner @each loop then iterates over each CSS property-value pair in the map for that theme, creating a CSS Custom Property for each pair. CSS Custom Properties have the format --[property]: [value];

I typically utilize this in a React Provider called GlobalProvider which allows me to easily switch between themes. The state changes, and the theme is updated. All the descendants will be updated with the new theme.

GlobalProvider.js

  return (
    <GlobalContext.Provider value={ctx}>
      <div className={`theme--${theme === 'dark' ? 'dark' : 'light'}`}>{children}</div>
    </GlobalContext.Provider>
  );