For me, there have always been two ways of doing the CSS for a website: do everything bit-by-bit in Chrome devtools, copy it over, repeat, and Sass. I still switch back and forth between both, but over the years, as the technologies used in creating a website become more complex and intricate, I find myself writing less and less of my CSS in devtools and more in Sass for a number of reasons, the main one being organization.

For the uninitiated, Sass is a CSS preprocessor that extends on CSS by adding functionality like variables, loops and more, effectively turning CSS into more of a programming language, while still retaining the familiarity of CSS we've all come to know and love. To learn more about Sass, visit their website.

Outside of using $branding for your brand's primary colour, @include transition(all 0.2s) to avoid typing out every single browser prefix, and including media tags right in the CSS property's declaration, another fantastic thing Sass does are imports. Not completely unlike CSS imports, what you're essentially doing with a Sass import is importing a partial Sass file that contains a minimal amount of code.

Let's assume the webpage you're designing has a header, a footer, a main content area and a sidebar. In CSS, if you wanted to separate the styling for each section into different files, you'd either have to include link tags for each file (awful to begin with), or use an @import (equally awful in vanilla CSS). With Sass, you may be importing different files, but during the transition from SCSS file to CSS file, everything gets combined. No additional server requests, and no mess! As an example, let's take a look at how I structured my website's Sass files:

Everything is fairly self explanatory:

  • The primary SCSS file is where we call our partials
  • Compiled CSS file is what the website will call for its styles; in the simplest terms: SCSS -> CSS
  • The Sass partials are all partials files containing Sass code for specific sections. Each partial needs to be placed in the partials folder, with an underscore prepending their file names.

Here's what the style.scss file looks like:

All we do now is call the partials. To do this, we do a simple CSS import (this time, not awful). Instead of a CSS file though, we're simply calling the partial's folder, then the partial's filename without the file type or the underscore (example: we have a partial file called _grid.scss; all we do to call it is @import "partials/grid").

The main (and greatest) benefit to structuring your Sass projects this way is ease of readability, organization and if you end up having to pass the project on to another developer, you'll be a coding deity to them, spoken of in tales from generation to generation!

I won't do into details on compiling the Sass files into a simply CSS file (since you should a) know that by now or b) will figure that out on your own), but I'll leave you with one nice tidbit of Sass knowledge if you're compiling from the Ruby command line:

sass --watch style.scss:style.css --style compressed

Self-updating Sass to CSS conversion with the added benefit of minification/compression. Bon appetit!