Recently I’ve been becoming more and more exposed to different development frameworks and techniques. One of them is the Sass CSS pre-processor, which has been nothing but lovely.
In an attempt to learn and use this practical tool, I’ve converted all of my theme’s CSS to work with Compass/Sass and configured Compass to minify the
CSS output. It’s also easier to change my own CSS code as well as updating the HTML5 Boilerplate code, because these are now more neatly separated in their own partials. Similarly, media queries for responsive design and print have been placed in their own partial as well.
This separation was the first step in my transition to Sass. I may have been too enthusiastic in the way I separated them, but we’ll see how it all pans out.
The next step was to try and use some of Sass’ biggest strengths: variables and mixins.
I personally feel I’ve not used variables to their maximum potential, simply because I don’t really have all that much that would be useful to turn into a variable. As such, there’s currently only four variables in my theme and they all involve colours:
$background-colour: #F7F7F7; $base-link-colour: #333333; // Note: also used for text-selection $base-font-colour: #444444; $border-colour: #d2d2d2;
Perhaps I can make other colours variable based on these using the various functions available to me.
Mixins have probably had more use for me, specifically in adding the few CSS3 effects that I use, like gradients and box shadows. These mixins look like this:
// Prefixer mixin, adds browser vendor prefixes automatically
// Defaults to webkit, moz and spec
@mixin prefixer ($property, $value, $webkit: true, $moz: true, $ms: false, $o: false, $spec: true) {
@if $webkit { -webkit-#{$property}: $value; }
@if $moz { -moz-#{$property}: $value; }
@if $ms { -ms-#{$property}: $value; }
@if $o { -o-#{$property}: $value; }
@if $spec { #{$property}: $value; }
}
// Adds CSS3 box shadow
@mixin shadow($h-shadow: 0px, $v-shadow: 0px, $blur: 15px, $colour: rgba(0,0,0,0.1)) {
@include prefixer(box-shadow, $h-shadow $v-shadow $blur $colour);
}
// Simple linear gradient mixin with solid fallback
@mixin linear-gradient($angle: top, $from: #fff, $to: #000) {
background: $from;
background: linear-gradient($angle, $from, $to);
background: -moz-linear-gradient($angle, $from, $to);
background: -webkit-linear-gradient($angle, $from, $to);
}
At first glance, mixins look very similar to functions in, for example, JavaScript. You can pass arguments to them(and assign default values to them) and even have access to simple so called control directives like @if, @for, @while and @each.
The first mixin is a generic “helper” that will help set browser vendor prefixes for certain CSS3 functions, so that I don’t have to myself. I had more use for this due to border-radius, but as it turns out vendor prefixes aren’t necessary for it anymore. Using a mixin for border-radius(@include border-radius(10px);) is just as much work as assigning it manually, if not more(border-radius: 10px;).
Unfortunately, this prefixer mixin won’t work for gradients, because the prefixes for that are set to the value of the background attribute. Which is unfortunate, but it will have to do.
As I get more comfortable using Sass and mixins, I’ll probably make more passes over my current CSS to see what else I can simplify. The first candidate will probably be the current selection code(::selection and ::-moz-selection both apply the same style…).
My Sass efforts can be found on Github. :)
So, Sass has been an awesome tool for me so far and I’ll no doubt keep using it. If you’re looking to get started with using Sass and don’t really know where to start, take a look at these two tutorials on TheSassWay.com and Sass-lang.com.