Your Blog Post Title Here... - Tech Talent and Strategy

While CSS may have semicolons and squiggly brackets like most programming languages, it doesn’t do the simplest things of other languages: mathematical logic and storing values in variables.

Get ready to meet Sass: the CSS preprocessor of your dreams!

A preprocessor takes one type of data and converts it to another type of data. Remember that browsers only really read HTML, JavaScript and CSS – so just like Rails lets you write Ruby which is converted to HTML (in an .html.erb file), Sass let’s you write stylesheets in a different way, which will be converted to CSS on it’s way to the browser.

To get started, it depends on what kind of project you’re working in. If it’s a non-Ruby on Rails project (so for your JS and Web Design students), you’ll have to find an application on Sass’ Install page. For Code Immersion students: you’re in luck! Rails projects come pre-loaded with a Sass gem! Unfortunately, you’re now getting dirty looks from the Front-End and JavaScript crews.

So what’s the advantages to using Sass, you ask? Well, I’d say there’s at least six advantages of plain CSS. Let’s check them out…

1. Syntax

Sass does away with those silly curly brackets and semicolons. I mean, what is this…JavaScript? Psh.

What you do need to be mindful of is, tabbing. You’ll need to pick a side in the tabs vs. spaces war, and not switch teams. (So no tabbing on one line, and then two spaces on the next.) But you should already be used to this kind of thing from writing clean HTML and/or Ruby code.

So here’s a look at some plain CSS code:

body {
  color: #336699;
}

p {
  background-color: tomato;
  font-weight: bold;
}

In Sass, that would look like this:

body
  color: #336699

p
  background-color: tomato
  font-weight: bold

Another cool aspect of Sass syntax is the ability to nest. So say you had this CSS file:

article p {
  padding: 10px;
  color: #336699;
}

article span {
  padding: 5px;
  color: red;
}

In Sass, you could “nest” p and span inside of article, instead of doing them separately:

article
  p
    padding: 10px
    color: #336699
  span
    padding: 5px
    color: red

2. Variables

Sass brings CSS a little closer to programming languages like JS and Ruby. Firstly, by letting you store values in variables.

This comes in handy particularly for hex codes, color names, and px/em values you may use frequently within a stylesheet. For example, let’s say my company colors are #F79027 and #2d2d2d. I’m going to be using those hex colors within several rules, so instead of trying to remember the codes, or going back and copying-and-pasting all the times, I’m going to set them as variables with names that are much easier to remember than a hexcode:

$my-orange: #f79027
$my-gray: #2d2d2d

nav
  background: $my-gray
  color: $my-orange

p
  color: $my-gray

.special
  border: 1px solid $my-orange

3. Operators

The other way that Sass bring CSS into the programming language world is by allowing math operations. You can now Add, Subtract, Multiple, Divide and use the Modulus (%).

You can use these operators on px/em or hex code values, whether they’re stored in a variable or not.

Using the operators on hex codes is probably the more…esoteric use. And probably only for color theorists and those who like to roll the dice and don’t particularly care what color they’re background comes out as.

Where we can all agree it’s useful is layout. Say we have some a pair of divs we want to act as an article and a sidebar. Sass works on a grid of 960px, so we can use floats and width percentages (found by using operators), to lay this out:

.container
  width: 100%

.article
  float: left
  width: 600px / 960px * 100%

.aside
  float: right
  width: 300px / 960px * 100%

In plain CSS, this would show as:

.container {
  width: 100%;
}

.article {
  float: left;
  width: 62.5%;
}

.aside {
  float: right;
  width: 31.25%;
}

4. Mixins

Some things in CSS are somewhat tedious to write, especially with CSS3 and the many browser-specific prefixes that may be required. A mixin let’s you make groups of CSS declarations that you want to re-use throughout your stylesheet.

A border-radius is a good example of this. In plain CSS, anytime you have a border-radius on an element/class/id, you (at least you should) be writing this:

.important-info {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

And that’ll just cover the “important-info” class, what if you want it used on another class, or id, or element, and with a different pixel value? You’ll have to write it all over again! But Sass mixins are here to help:

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.important-info
  +border-radius(10px)

#fancy_form
  +border-radius(5px)

.rounded
  +border-radius(300px)

The mixin is defined at the top (like setting the $variables), and definition is denoted with an equal sign (=). Every time you call the mixin, you proceed it with a plus sign(+).

Mixins are sort of like functions/methods from JS/Ruby: they allow you to collect lines of code for frequent later use, and they let you pass through an argument value (in our example, represented by the $radius value).

5. Inheritance

One of the most useful features of Sass is inheritance, using @extend. This lets you share CSS properties from one selector to another. This way, you can save on writing selectors over and over, or possibly avoid having to call multiple id’s or classes in your HTML elements.

.center-it
  text-align: center

.index-wells
  @extend .center-it
  background: $my-gray

.show-wells
  @extend .index-wells
  height: 250px

Your CSS will end up looking like this:

.center-it, .index-wells, .show-wells {
  text-align: center;
}


.index-wells, .show-wells {
  background: yellow;
}


.show-wells {
  height: 250px;
}

6. Importing & Partials

The last, at least in this list, special thing about Sass is the idea of using partials and importing. Sass (just like Rails), let’s you create partial files, which are only meant to be called (in Rails, “rendered”), in other files. These partial files must have names that start with an underscore(_).

To bring them into another file, you use @import. Here’s an example


// _navs.sass


nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
  a
    display: block
    padding: 6px 12px
    text-decoration: none

// main.sass


@import navs


body

  background-color: pink

One last thing: everything we’ve being doing above has been within .sass files. But you may have seen around .scss files, especially if you’ve added the Bootstrap gem to your Rails project. These files are hybrids of .sass and .css files, able to use Sass methodology, but with slightly different notation, and, you gotta bring back the curly brackets and the semicolons. As one example, here’s .scss notation for a mixin:


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


.important-info { @include border-radius(10px); }

Now you’re on your way to having a very Sassy project!