You are currently browsing the See John Code posts tagged: sass


Sass is Boss

Another installment of my “.. is boss” series, where I highlight a technology I love. This week, one that I’ve been using for about two years. Its called Sass, and it provides a syntax called “SCSS” (Sassy CSS), which is an extension of CSS3 that can be compiled down to CSS with a sass compiler.

I’ve used Sass in many projects, even outside of Ruby / Rails, where it is just as valid, only less popular.

By being compiled, Sass is able to add a few amazing features. Here are two of my favorites:

Nesting

A lot of times we want one rule nested inside of the selector of another rule:


#page {
background: #990000;
}
#page .box {
color: #fff;
padding: 10px;
}

We can let Sass/SCSS handle the nesting, with a much more natural syntax:


#page {
background: #990000;
.box {
color: #fff;
padding: 10px;
}
}

This can get dangerous quickly if you nest too heavy, so definitely always be mindful of what your SCSS will compile down to.

Variables

How many times have you wished CSS had variables? Sass lets you have them, and also do transforms on them. So you can perform mathematical operations to systematically cut up widths instead of changing numbers in 10 places when you want to change the page width. Or you can darken a master color and use it all over your page. You can end up with your style guide specified as a set of configs and mixins that you load in where you want them. And since it all compiles down before hitting the server, for the client it will be just as fast as a static CSS file (when set up properly).

Some sample usage:


$red: #990000 body {
background: $red;
}
#page {
background: darken($red, 20%);
}

There’s more

Mixins are a great feature of Sass also, and its absolutely worth checking out more on sass-lang.com.

When you’re done there, your next stop should be at the site for Compass. Compass builds on top of Sass to add more helpers to Sass.

My favorite is their CSS3 Compatibility, which provide cross-browser ways to use things like opacity. You use these helpers and inserted in their place is all of the various ways that browsers want to see those rules. No more googling “cross-browser opacity”:


@import "compass/css3/opacity"
.box {
@include opacity(0.5);
}

Wrap-up

If you haven’t already used Sass, I hope I’ve inspired you to go check it out! It’ll really speed up your CSS workflow.


CoffeeScript: A Love Story?

I’m currently going through the same phase in my relationship with CoffeeScript that I went through a year ago with Haml and Sass. For those of you unfamiliar with CoffeeScript, its just a little syntax language that compiles directly to Javascript. Why would you want that? Well, let’s look at Haml and Sass:

Haml

Haml code looks like this:

#wrapper
  #sidebar
    %a{:href => 'http://google.com'} Google
  #content
    %img{:src => 'lolcats.jpg'}

which when compiled to HTML, produces



The cool part here is that since Haml is auto-closing all of your tags, they’re automatically balanced. And the syntax is easier to read (IMO).

Sass


$padding_size: 20px
#sidebar a, a:visited
padding: $padding_size / 2
text-decoration: none

when compiled to CSS, produces


#sidebar {
padding: 10px;
}
#sidebar a, #sidebar a:visited {
text-decoration: none;
}

So Sass uses the benefit of precompilation to add a few features (and mixins) to CSS. Above we can see in use: (1) variables, (2) math, (3) nesting.

CoffeeScript

So then there’s CoffeeScript. If you haven’t tried the “Try CoffeeScript” demo yet, totally do that. Since the CoffeeScript compiler is implemented in JavaScript it can run for reals right in your browser. When you’re ready to use it, if you’re using Rails,Barista is pretty awesome and quick to set up.

So now – why CoffeeScript again? CoffeeScript addresses a major pain point for Javascript developers: appearance, and JSLint. CoffeeScript always compiles to code that is set for JSLint (and normally more performant).

So this code in CoffeeScript:

square = (x) -> x*x
numbers = [2, 3, 4, 5, 6]
numbers.each (x) -> square(x)

Compiles to:


var numbers, square;
square = (function(x) {
return x * x;
});
numbers = [2, 3, 4, 5, 6];
numbers.forEach(function(x) {
return square(x);
});

So, why the question mark in the title?

This doesn’t doesn’t speak well to Haml, but Sass makes changing CSS much, much easier. CoffeeScript changes Javascript syntax to make it more likable, but its still just Javascript. We probably shouldn’t be adding entire steps to our process just to make things prettier and lint-free, but on the other hand – its so nice :)