Designing with SASS

This past week, I ported the stylesheet for a web design project I’m currently working on from the traditional stylesheet to one formatted with SASS. And holy crap, y’all, how have I not started doing this sooner?

I’d heard about CSS preprocessors a little while back, and shortly after that WordPress added support for both SASS and LESS. Since I wasn’t working on any design projects at the time, I didn’t devote any attention to learning more about them. But I did read a couple of brief overviews, and a couple of items piqued my interest. The first was the ability to use variables to set a value once, use it multiple locations in your stylesheet, and then be able to change all the values at once simply by adjusting the value of the variable. This is a particularly handy tool with colors, since many elements in a site design use the same color values. Where before you might have:

.example {
     color: #ffffff;
     }

With SASS, you can create a variable called $font-color: #ffffff; and use it in place of your color value, thusly:

.example {
     color: $font-color;
     }

Now you can use the $font-color variable on any element that will use the same color in your design, and if you decide later that a different color will work better, just swap the value in the variable and the preprocessor will apply it to every element. Huge timesaver, that.

Another thing I appreciate about preprocessors is the ability to nest styles. Child elements in the nest automatically receive the parent classes, selectors, or identifiers in the rendered output. This eliminates the need to type those identifiers repeatedly the way you would in traditional CSS and makes your stylesheet easier to read. Instead of:

.main-navigation {
     margin-top: 5px;
     }

     .main-naviation ul.nav-menu, .main-navigation div.nav-menu > ul {
          border: 0;
          }
	
     .main-nvaigation li {
          font-size: 1.5rem;
          }

You can nest your elements like so:

.main-navigation {
     margin-top: 5px;
	
     ul.nav-menu, div.nav-menu > ul {
          border: 0;
          }
	
     li {
          font-size: 1.5rem;
          }
     }

The preprocessor then renders the output like this:

.main-navigation {
    margin-top: 5px; }
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
      border: 0; }
    .main-navigation li {
      font-size: 1.5rem; }	

Again a huge timesaver.

One of my other favorite features is the ability to split the stylesheet out into individual files, which the preprocessor then builds during processing. There’s still only the one HTTP request, and so any overhead normally incurred from the @import call is eliminated. For my project, I broke my stylesheet in six smaller files — one each for my variables, site body, header, content area, sidebar, and footer. Breaking my stylesheet down this way accomplished two things: 1) it made my stylesheet more manageable by reducing the amount of scrolling I needed to do, and 2) it made it easier to organize the elements for each individual section. At the final result, my based stylesheet ended up looking like this:

/*
 Theme Name: New theme
 Theme URI: newtheme
 Description: Twenty Twelve child theme
 Author: Jim Stitzel
 Author URI: https://jimstitzel.com
 Template: twentytwelve
 Version: 1.0
*/

@import url("../twentytwelve/style.css");

@import 'variables';

@mixin search-border-radius($radius) {
	-webkit-border-radius: $radius;
	   -moz-border-radius: $radius;
	    -ms-border-radius: $radius;
	        border-radius: $radius;
	}


@import 'body';
@import 'header';
@import 'content';
@import 'sidebar';
@import 'footer';

Technically, I could have split off the mixin into its own file, as well, but since there’s only the one, I opted to leave it where it was.

As I said above, WordPress now includes preprocessor support for both SASS and LESS inside its Jetpack plugin. You can also use a desktop preprocessor, like Koala, to do all the heavy lifting and then just upload the final stylesheet to your site.

I’m very pleased and happy with the result of my first experience with SASS. It has already saved me a lot of time and effort, and I plan to use it for every design I do in the future. If you want to read more about either SASS or LESS, I highly recommend you check out their respective sites. It’ll change the way you design.