DIGITALREP

Using SASS (instead of just plain boring old CSS on its own)February 22, 2014

Because let’s face it – CSS3 on its own just wasn’t complex enough!

All jokes aside though, with compass and sass added to the mix we now have the ability to throw in variables, mix-ins, advanced nesting, the ability to sort our css into sections via imports and other various wonderful things. It almost makes css seem like a scripting language. So how do you add variables and stuff into plain old css? By writing it all up in a .scss file which is then parsed by Ruby which then creates valid css files that contain literal values for your variables, imports and mix-ins.

Installing Sass

You’ll need to install Ruby first if you haven’t already (their website has an installer you can use). Once you have Ruby installed just open a command prompt and type:

gem install sass

If you get an error try opening the command prompt as an administrator. To check if it’s installed simply query its version:

sass -v

The advantages of pre-processing css with sass

Variables

Write it once at the top of your .scss file and use it many times; then, when you need to change it because Malcolm McFickle decides he no longer likes that particular shade of blue, you only have to change it in one place. Awesome!

$mcfickle_blue: #709AAA;

.bluish {
  background: $mcfickle_blue;
}

Mix-ins

Pretty sure this was created because of the border-radius property.
Note that just like a function you can pass into the mix-in a specific value when you use it. Until then it is assigned a placeholder variable. Pretty neat.

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

.funky_bubble {
  @include border_radius(100px);
}

Partials and Imports

You may have some css that applies only to one particular section of your site, say, the ‘quite unnecessary cute pictures of cats page’, and you want to keep the details separate from the main css for the sake of brevity and readability, so you go ahead and stick your cute cat css into a partial. Partials always have an underscore prefix, for example _cutecats.scss. Then you simply import it into your main .scss file:

@import ‘cutecats’;

Note that you don’t have to specify the whole filename. Also realise that each import creates another HTTP request. See – your OCD does have consequences.

Smooth Operators

Any numerical value can have mathematical operators applied to it. I suppose if you’re really lazy then this feature was made just for you! No more using Windows calculator to figure out what 14% of 500px is – sass can do that for you now!

.littertray {
  width: 500px * 14%;
}

Nesting

While css already takes advantage of nesting, sass offers yet another, apparently more readable implementation of nesting:

css style nesting:

.littertray {
  width: 500px * 14%;
}
.littertray .poop {
  color: $brown;
  opacity: 1.0;
}
.littertray .pebble {
  color: $ash;
  opacity: 0.8;
}

sass style nesting:

.littertray {
  width: 500px * 14%;
  .poop {
    color: $brown;
    opacity: 1.0;
  }
  .pebble {
    color: $ash;
    opacity: 0.8;
  }

Extending

Or, in other words, inheritance:

.cat {
  margin: $standoffish;
}
.russian_blue {
  @extend .cat;
  color: $darkgrey;
  padding: $medium;
}
.tabby {
  @extend .cat;
  background: $dark;
  color: $sandy;
  padding: $lots;
}
.ginger {
  @extend .cat;
  color: $orange;
  padding: $none;
}

Of course, you could already do this with plain css:

.russian_blue,
.tabby,
.ginger {
  margin: $standoffish;
}
.russian_blue {
  color: $darkgrey;
  padding: $medium;
}
.tabby {
  background: $dark;
  color: $sandy;
  padding: $lots;
}
.ginger {
  color: $orange;
  padding: $none;
}

Compiling the .scss into css files

It’s very simple – just use the command ‘sass’ and then the name of your .scss file:

sass style.scss

Category: Tutorials
Tags:  

Leave a Reply

Your email address will not be published. Required fields are marked *