SASS Architecture

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!

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

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