SASS Architecture

/ August 25, 2020 / Front-End, SASS
SASS Architecture design

It is always a good idea to keep things organized. It could be your room, bookshelf, computer, table, work, codebase, office, literally anything. When things are organized there are a lot of advantages. In simple it’s stress-free maintenance.

Well, today let’s organize SASS code. It’s really good for Front-End Developers and especially for Big projects. 

Let me explain one of the best and well-organized SASS architecture i.e 7-1 SASS Pattern also known as 7-1 SASS Architecture.

7-1 SASS Architecture

sass/
|
|– base/
|   |– _base.scss
|   |– _reset.scss
|   |– _typography.scss
|   |– _normalize.scss
|
|– layout/
|   |– _navbar.scss
|   |– _footer.scss
|   |– _sidebar.scss
|   |– _header.scss
|
|– abstracts/
|   |– _variables.scss
|   |– _colors.scss
|   |– _mixins.scss
|
|– components/
|   |– _alert.scss
|   |– _button.scss
|   |– _label.scss
|   |– _modal.scss
|   |– _course-card.scss
|   |– _infobox.scss
|   |– _success-popup.scss
|   |– _profile-card.scss
|
|– pages/
|   |– _product.scss
|   |– _product-single.scss
|   |– _blog.scss
|   |– _blog-single.scss
|   |– _invoice.scss
|   |– _login.scss
|   |– _signup.scss
|
|– themes/
|   |– _dark-theme.scss
|   |– _light-theme.scss
|   |– _material-theme.scss
|   |– _flat-theme.scss
|
|– vendors/
|   |– _bootstrap.scss
|   |– _owl-carousel.scss
|   |– _jqueryui.scss
|
 – main.scss

7-1 SASS Pattern means 7 Folders and 1 FIle. 7 Folders have their meaningful labels which include sass snippets or partials. Outside the 7 folders, 1 file will include all the partials or snippets from 7 folders and compile it to 1 CSS file. Amazing!

7 Folders in 7-1 SASS Architecture:

  1. Base
  2. Layout
  3. Abstracts
  4. Components
  5. Pages
  6. Themes
  7. Vendors

Believe me, 7-1 SASS Architecture is so easy and well organized, so that I don’t have to worry about finding CSS properties or anything related to project style, I exactly know where they are located. 

I have been using a 7-1 SASS pattern for 3 years on my project and client’s projects as well.

SASS pattern file structure and import detailed sass file
SASS pattern file structure and import detailed sass file

Base

The base folder is something like a foundation style for the project, as the name says. Something serves throughout the project. This includes the base, reset, typography, normalize. In my project, I just have base.scss with few styles which I need throughout the website.

  • _base.scss
  • _reset.scss
  • _typography.scss
  • _normalize.scss

Layout

The layout folder contains the style for a website layout, simple as the name suggests. This folder includes stylesheet for the navbar, sidebar, footer, header, etc.

  • _navbar.scss
  • _footer.scss
  • _sidebar.scss
  • _header.scss

Abstracts

The abstract folder is something different from other folders. Styles written in this folder do not compile to CSS. They are the helpers for other folders. Two major SASS Abstracts are variables and mixins. 

Variables are like a container that holds some value, later it can be used in other CSS property values. Later we can change the value of that variable so that the entire project gets updated with just one line of code.

Mixins are something that helps in reducing the effort of writing long codes or reusable codes. The best example would be media queries. They are really effective and easy to use.

  • _variables.scss
  • _colors.scss
  • _mixins.scss

Components

Components are a set of codes which has their character. It might be just one HTML element or a block of HTML elements. 

Alert box, button, label, badge, list group, panel, modal are some of the common components we see on websites.

Apart from these common components, we can create our components. For example, Course card, infobox, product card, success popup, profile card, and more.

  • _alert.scss
  • _button.scss
  • _badge.scss
  • _label.scss
  • _modal.scss
  • _course-card.scss
  • _infobox.scss
  • _success-popup.scss
  • _profile-card.scss

Pages

The pages folder contains the style for targeting pages. It can be individual pages or a set of pages. 

In my experience, I haven’t used this folder much apart from one e-commerce project. I hade a few files in it, Login, Signup, Product, Product single, Blog, Blog single, and Invoice. Use this folder if it’s really required, if not just delete this folder, it is not something you have to use all the folder as the name says 7-1 SASS architecture. It’s all up to you on understanding it.

  • _product.scss
  • _product-single.scss
  • _blog.scss
  • _blog-single.scss
  • _invoice.scss
  • _login.scss
  • _signup.scss

Themes

Themes folder is related to an overview of the project look. It could be Light theme, dark theme, blue theme, etc.. This is also a folder used in very rare cases. Usually, this folder is used in template websites and open source projects. 

  • _dark-theme.scss
  • _light-theme.scss
  • _material-theme.scss
  • _flat-theme.scss

Vendors

All the external styles or 3rd party styles are placed in the Vendor folder. It could be libraries or frameworks. The most commonly used vendors are Bootstrap, Owl Carousel, JqueryUI, etc.

  • _bootstrap.scss
  • _owl-carousel.scss
  • _jqueryui.scss

Vendors modifications (Optional additional folder)

In some rare cases, we have to override the vendor’s styles to match our theme or style. It is not recommended to overwrite styles in the vendor’s folder. Instead, we can create a separate folder for modifying or overriding the vendor styles. This will a good idea.

  • _bootstrap-button-mod.scss
  • _bootstrap-alert-mod.scss

Conclusion

Architecture is important for all projects, its a form of discipline. In my experience, I have come across many projects. There are many projects without even basic code standards. Makes it difficult to understand the flow. It should not be, right?

A good architecture and code standards make better productivity. Keep things clean and understandable. Along with this maintain proper documentation or simple information in the comment on each file so that your team members are comfortable with it.

Reference: GitHub link for 7-1 SASS Architecture


Related Post

How to convert HTML to Laravel blade – Front-End in Laravel
We have a lot of frameworks in the market now, it might be Front-End or Back-End frameworks. Options are many. Just one scenario I'm going…

Front-End, Laravel / August 31, 2020

Categories