How to restructure your webapps CSS with SASS

SASS is awesome, seriously awesome, massive chocolate bar covered in honey slapped into a wedge of ice cream awesome. Taking full advantage of this awesomeness does require a bit of a CSS rethink however since SASS allows you to write your css programmatically with functions and variables. Thanks to the ability to import SASS files into other SASS files you can also write partials which allow the breakdown of styles in modules and components into a similar fashion to how any decent programmer will break a web application.

If you’ve been working on the frontend of web apps for a while then you have undoubtedly gone through many iterations of how you structure your applications CSS, likewise the backend architecture of apps that you develop will have changed considerably. This is the natural evolution of any programmer, through experience we learn which bits of functionality should be modularised so they can be reused.

Keep it partial

With traditional CSS, modularisation is definitely par for the course through the use of classes and ids, but SASS allows us to take this idea one step further by through the use of functions and partials.

So lets take a look at a proposed structure based on SASS’s sweet new features:

/web/sass
  ->home.scss
  ->articlesSelected.scss
  ->articlesLanding.scss
/web/sass/mixins
  ->_colours.scss
  ->_typography.scss
  ->_layout.scss
/web/sass/partials
  ->_base.scss
  ->_reset.scss
  ->_layout.scss
  ->_lists.scss
  ->_comments.scss
  ->_pagination.scss

The idea here is that each module/action within your app has it’s own SASS file, inside which only the partials and mixins needed for that module will be imported. This is in a similar fashion to a well structured webapp where only the required functions and classes are imported so performance is optimised.

To demonstrate this lets take a peek at what home.scss might look like:

/*========================================
SASS IMPORTS
==========================================*/
@import "mixins/colours";
@import "mixins/typography";
@import "mixins/functions";
@import "partials/reset";
@import "partials/base";
@import "partials/layout";
@import "partials/lists";
/*========================================
HOME STYLES
==========================================*/
...

It may be the case that the home.scss file contains barely any styling at all, in fact that is highly desirable. The idea is that any thing that can be made modular should be popped into a partial so it can be reused anywhere, any page specific styling can be popped into the pages SASS file. Once again we are applying basic programming principles here, that is making code that is reusable/modular, allowing underlying functionality to be easily extended and re-purposed.

Some of these partials are specific to the fictitious app that I have conjured up for demonstration purposes, quite a few them I consider to be relevant to any web app however. Let’s take a look at these:

Reset

I normally take an off the shelf reset stylesheet and turn it into a partial, use whatever one you prefer.

Layout

Inside this you should put the elements that form the layout of your site that do not change from page to page. So your sites header, it’s navigation, content area and footer should go in here. If your site has multiple layouts then you should introduce multiple layout partials. So you might have one for a standard layout, one for a minimal layout and whatever else you require.

Base

This is where you should put classes that are needed across your entire web app. Now whether or not you need this partial is debatable, this could be broken down into other partials and these could be included only when absolutely necessary. However in my experience there always some classes that are prevalent throughout a site, so I always have a partial like this.

Functionalise this

Aside from partials we also have an another awesome feature of SASS, that is functions and variables, or mixins in SASS terms. Managing fonts and colours can become a massive headache across even small sized apps, having hex values and font settings littered across a heap of files can make life very difficult when making changes further down the line. SASS variables make managing these settings much easier.

Lets take a look at an example of this:

/*========================================
COLOUR
==========================================*/
/* Borders */
$heavyBorder:#a0a0a0;
$mediumBorder:#c8c7c7;
$lightBorder:#dfdfdf;

/* Text */

$heavyTextColour:#000;
$mediumTextColour:#494955;
$lightTextColour:#323232;

/* Backgrounds */

$mainBackgroundColour:#bebebe;
$heavyBackgroundColour:#c5c5c5;
$mediumBackgroundColour:#ddddde;
$lightBackgroundColour:#f2f1f1;

/*========================================
TYPOGRAPHY
==========================================*/
$siteFont:Droid Sans, Helvetica, Arial;

@mixin largeText($colour: $mediumTextColour){
    color:$colour;
    font-size:16px;
    font-weight:normal;
    line-height:20px;
}

@mixin mediumText($colour: $mediumTextColour){
    font-weight:normal;
    font-size:15px;
    color:$colour;
    line-height:18px;
    text-transform:none;
}

@mixin smallText($colour: $mediumTextColour){
    font-weight:normal;
    font-size:14px;
    color:$colour;
    line-height:16px;
    text-transform:none;
}

Having your colours and font styles centralised in this manner makes your site much easier to maintain, it also gets rid of the need to have lots of different classes for all of your different textual styles, you can simply apply a predefined mixin to the element rather than assigning loads of different classes which only serve to confuse.

I find it useful to have a mixin that contains function for standardising margins, padding, borders and that sort of thing.

Now go forth and get sassy.