SASS Architecture project

SASS

The whole concept of what SASS does for CSS is awesome; nesting, variables, functions, and more. SASS is a preprocessor scripting language that gives your CSS superpowers. Converting “OLD” CSS / CSS3 may be a bit of a pain and if your CSS is spaghetti code with no comments then it will take longer. Once the painful process of migration and refactoring of old code is done then the true power of your SASS Architecture will flex its mighty CSS superpowers.

First thing I do is create the tree structure. One of the many benefits of SASS is the architecture. In SASS you can use a “directive” called @import and have as many files called partials (I’ll example later) as you want. This is the greatest thing about SASS (in my opinion), now you can divide your project up more “component” based and only code for that specific HTML element (component).

Basic example of a SASS tree structure.

sass/ 
| 
|– base/ 
|   |– _reset.scss       # Reset/normalize
|   |- _headers.scss     # Headers H1 - H6
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 
|– components/
|   |- links/
|      |- _header-links.scss   # Header Links 
|      |- _footer-links.scss   # Footer Links
|      |-  ...                  # Etc… 
|   |- buttons/
|      |- _btn-primary.scss    # Primary Button  
|      |- _btn-secondary.scss  # Secondary Button
|      |- _btn-disable.scss    # Disabled Button
|      |-  ...                 # Etc…
|   |– _carousel.scss    # Carousel 
|   |– _header-nav.scss  # Header Nav
|   |– _dropdown.scss    # Dropdown 
|   |– _navigation.scss  # Navigation 
|   ...                  # Etc… 
|– helpers/ 
|   |– _variables.scss   # Sass Variables 
|   |– _functions.scss   # Sass Functions 
|   |– _mixins.scss      # Sass Mixins 
|   |– _helpers.scss     # Class & placeholders helpers 
|   ...                  # Etc… 
|– layout/
|   |- _aside.scss       # Aside
|   |– _grid.scss        # Grid system 
|   |– _header.scss      # Header 
|   |– _footer.scss      # Footer 
|   |– _sidebar.scss     # Sidebar 
|   |– _forms.scss       # Forms 
|   ...                  # Etc… 
|– pages/ 
|   |– _home.scss        # Home specific styles 
|   |– _contact.scss     # Contact specific styles 
|   ...                  # Etc… 
|– vendors/ 
|   |– _bootstrap.scss   # Bootstrap 
|   |– _jquery-ui.scss   # jQuery UI 
|   ...                  # Etc… 
| 
`– main.scss             # primary Sass file 

Looking closer there is only one main SASS file at the root of the directory: main.scss . All the other files are seperated up into their own specific folders and prefixed with an “underscore” (_) denoting that those files are “partial” .scss files that should not be compiled into .css files. It is the file at the root level of the directory to import and merge all files into.

“One file to rule them all,
One file to find them,
One file to bring them all,
And in the Sass way merge them.”
— J.R.R. Tolkien

Base

The base/ folder has all the boilerplate files for the project. In here you would have the reset or normalize CSS. You may also have the typography files.

sass/ 
| 
|– base/ 
|   |– _reset.scss       # Reset/normalize
|   |- _headers.scss     # Headers H1 - H6
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 

Helpers

The helpers/ folder (also called the utils/) has all the tools and helpers that are used globally around the project. This folder contains the variables file (sometimes called _config.scss) which holds all global variables. Here is where the we keep the functions.scss, unlike MIXINS that output lines of Sass, functions return a value. One of the powerful aspects of SASS is MIXINs. A MIXIN is an abstraction of a common pattern into a semantic and reusable chunk of code.

|– helpers/ 
|   |– _variables.scss   # Sass Variables 
|   |– _functions.scss   # Sass Functions 
|   |– _mixins.scss      # Sass Mixins 
|   |– _helpers.scss     # Class & placeholders helpers 
|   ...                  # Etc… 

Layout

The layout/ folder contains a number of files regarding page specific styles for sections of the page layout (header, footer, aside, forms). The navigation could potentially make sense in here but me personally I put it in the components folder because usually I have several navigation components.

|– layout/
|   |- _aside.scss       # Aside
|   |– _grid.scss        # Grid system 
|   |– _header.scss      # Header 
|   |– _footer.scss      # Footer 
|   |– _sidebar.scss     # Sidebar 
|   |– _forms.scss       # Forms 
|   ...                  # Etc… 

Components

The components/ folder is where you will probably have most of your files. I get real specific with my components, it grants me the ability to create and style many different components (buttons, links, navigations, and more). The control you have over your UI is amazing. The more specific you get with you components the easier it is later on when you go to apply theming with a MIXIN and function. I’ll talk about that in another post.

|– components/
|   |- links/
|      |- _header-links.scss   # Header Links 
|      |- _footer-links.scss   # Footer Links
|      |-  ...                  # Etc… 
|   |- buttons/
|      |- _btn-primary.scss    # Primary Button  
|      |- _btn-secondary.scss  # Secondary Button
|      |- _btn-disable.scss    # Disabled Button
|      |-  ...                 # Etc…
|   |– _carousel.scss    # Carousel 
|   |– _header-nav.scss  # Header Nav

Pages

The pages/ folder if you require page specific styling is where you write it in. This makes it more manageable if for example you have home page specific styling _home.scss.

|– pages/ 
|   |– _home.scss        # Home specific styles 
|   |– _contact.scss     # Contact specific styles 
|   ...                  # Etc… 

Vendors

The vendors/ folder contains all the CSS files that a project may use from external libraries and frameworks such as Bootstrap, jQueryUI, and others. useful place to manage external libraries.

|– vendors/ 
|   |– _bootstrap.scss   # Bootstrap 
|   |– _jquery-ui.scss   # jQuery UI 
|   ...                  # Etc… 
|

Most frequent question others ask me…

“How many files is too many files?”

My answer, “There are never too many files. The more specific your partials are the more organized your code will be. If you feel like something needs to be divided up than it problems does.
Great guide when writing CSS to live by: SASS style guide.

My suggestion is to experiment, not every project is the same and doesn’t always required a lot of MIXINs or specificity of components. Leverage the power of SASS for your project. Everything I have wrote about is just a guide similar to many out there. I love working with SASS and the power it brings to any web application.