Sass is the bomb. Okay, you’re probably aware of that and that’s why you’re here, but I still felt it should be mentioned. Most of what I’ve learned about Sass over the last few months has been the result of devouring @SassNews and their fantastic articles on a weekly basis, as well as a bit of tinkering in my own time, and the results have been incredible (don’t judge me for my vanity… please).

The point of this, then, is to try and distil what I’ve incorporated into my own workflow and share that with you, dear reader, into something you may be able to benefit from.

Over 9000

Perhaps Sass’s greatest strength as a preprocessor (and the reason it’s chosen over others) is its built-in functional power. “What do you mean by that, you vague and unhelpfully ambiguous fiend?” you may be asking. I mean that Sass is able to use the kinds of functions you would expect in a normal programming language like PHP or Java. It’s able to power up with things like “each” loops (also available in “for” loops flavour), “if” statements and special variables like lists and maps (which are kinda like associative arrays).

“Okay, but how do I leverage all those cool things?” you ask, you impatient little scamp. I’ll show you.

Consider this code for a breakpoint mixin:

@mixin breakpoint($value){
    @if $value == "small" {
        @media all and (min-width: 480px){
            @content;
        }
    }
}

Now this works. The @content part means that when I use this, I can put whatever I like in there. If I used ‘@include breakpoint(“small”)’ my output will look like this:

@media all and (min-width: 480px){
   //some stuff I put in place of @content
}

And that’s great. Now if you’re curious on expanding that mixin and finally ridding yourself of your media query woes, you might add to it by including ‘@else if’ statements like so:

//previous @mixin breakpoint
@else if $value == "medium" {
    @media all and (min-width: 760px){
       @content;
    }
}

And so on. Now that’s great and it’ll work just fine. But what if someone (usually that guy who’s taking over from you with the code) goes something like ‘@include breakpoint(“enormous”)? Well you’re probably going to be pissed off, but more importantly he won’t know why it doesn’t work. It just won’t. Additionally, this mixin isn’t very DRY.

So how can we change that using more of Sass’s Super Saiyan power? In this particular case we can really power the mixin up with a map, one of those special variables I was telling you about earlier. It works like an associative array does in PHP, and it uses key-value pairs to store data.

An example:

$map: (
  small: 480px,
  medium: 760px,
  large: 1140px
);

Now we have all our breakpoints nice and neat. Now we can write a better mixin to handle these breakpoints, like so:

@mixin breakpoint($breakpoint){
   $map : (small: 480px, medium: 768px, large: 1140px);
   
   @if map-has-key($map, $breakpoint){
      @media all and (min-width: #{map-get($map, $breakpoint)}){
          @content;
      	}
   }
   @else{
      @warn "There is no value #{$breakpoint} in the list of breakpoints";
   }
}

Some surprise attacks may be the “map-has-key” function (which just checks whether the key value — in this case the $breakpoint — exists in the map) and the “@warn” function, which I think is pretty self explanatory.

This is DRYer than our previous mixin, is easier to maintain (just edit the $map variable to add and remove breakpoints) and moans at any unscrupulous developer that comes along and uses a breakpoint that isn’t in the map. Balls-to-the-walls bro.

And so…

You should (hopefully) have a better understanding of some of the powerful functions that Sass gives you, ensuring your loyalty and that you’ll spurn anything that even tries to stake a claim to the throne. We are (as always with these sorts of things) just scratching the surface of what you can do with these functions, but this should at least help relieve some of your trepidation about using them.

In Part 2 of this mini-series I’ll be going through how to lay out a Sass project with ease of use and scalability in mind, leveraging the very useful pre-processor ability to import partials to create a base framework for use in any web project.