SASS - A Pre-processor of CSS3

Have you always wanted to learn Sass, but never quite made your move? Are you a Sass user, but feel like you could use a brush up? Well then read on, because today we are going to review the features of Sass and some of the cool things you can do with it.

WHAT IS SASS?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor. It is to CSS what CoffeeScript is to Javascript. Sass adds a feature set to your stylesheet markup that makes writing styles fun again.

SO UH, HOW DOES IT WORK?

Funny you should ask. There are several ways you can compile Sass:

• The original Ruby Sass binary. Install it with gem install sass, and compile it by running sassc myfile.scss myfile.css.
• A GUI app such as Hammer, CodeKit, or Compass
• My personal favorite libsass, which is a blazing fast Sass compiler written in C. You can also install libsass via NPM withnode-sass (npm install node-sass).

Which one should you use? That depends on what you are doing.

I work with large scale e-commerce codebases, so Ruby Sass is a little slow when compiling large source sets. I use node-sass in my build system, but I have to remain wary of the fact that libsass is not in 100% feature parity with Ruby Sass.

If you aren’t a command line person, the GUI apps are great. You can set them up to watch scss files, so when you edit them they will compile automatically.

If you want to just screw around, or share examples, I highly recommendSassmeister. It is a web based Sass playground that I will be using throughout this article.

WHATS THE DEAL WITH .SASS VS .SCSS?

When Sass first came out, the main syntax was noticably different from CSS. It used indentation instead of braces, didn’t require semi-colons and had shorthand operators. In short, it looked a lot like Haml.

Some folks didn’t take too kindly to the new syntax, and in version 3 Sass changed it’s main syntax to .scss. SCSS is a superset of CSS, and is basically written the exact same, but with all the fun new Sass features.

That said, you can still use the original syntax if you want to. I personally use .scss, and I will be using the .scss syntax in this article.

WHY WOULD I USE SASS?

Good question. Sass makes writing maintainable CSS easier. You can get more done, in less code, more readably, in less time.

Do you need more of a reason than that?

#Set Up

Without any further ado, lets get this party started. If you want to try some of these concepts while following along, either:

• Install your compilation method of choice, and create astyle.scss file.

#Variables

Thats right, variables. Sass brings variables to CSS.

Acceptable values for variables include numbers, strings, colors, null, lists and maps.

Variables in Sass are scoped using the $ symbol. Lets create our first variable:

$primaryColor: #eeffcc;

If you tried to compile this and didn’t see anything in your CSS, you’re doin’ it right. Defining variables on their own doesn’t actually output any css, it just sets it within the scope. You need to use it within a CSS declaration to see it:

$primaryColor: #eeffcc;

body {
    background: $primaryColor;
}

Speak of the devil (scope), did you know that Sass has variable scope? Thats right, if you declare a variable within a selector, it is then scoped within that selector. Check it out:

$primaryColor: #eeccff;

body {
  $primaryColor: #ccc;
  background: $primaryColor;
}

p {
  color: $primaryColor;
}

// When compiled, our paragraph selector's color is #eeccff

But what if we want to set a variable globally from within a declaration? Sass provides a !global flag that comes to our rescue:

$primaryColor: #eeccff;

body {
  $primaryColor: #ccc !global;
  background: $primaryColor;
}

p {
  color: $primaryColor;
}

// When compiled, our paragraph selector's color is #ccc

Another helpful flag, particularly when writing mixins, is the !default flag. This allows us to make sure there is a default value for a variable in the event that one is not provided. If a value is provided, it is overwritten:

$firstValue: 62.5%;

$firstValue: 24px !default;

body {
    font-size: $firstValue;
}

// body font size = 62.5%

Math

Unlike CSS, Sass allows us to use mathematical expressions! This is super helpful within mixins, and allows us to do some really cool things with our markup.

Supported operators include:

+	Addition
–	Subtraction
/	Division
*	Multiplication
%	Modulo
==	Equality
!=	Inequality

Before moving forward, I want to note two potential “gotchas” with Sass math.

First, because the / symbol is used in shorthand CSS font properties likefont: 14px/16px, if you want to use the division operator on non-variable values, you need to wrap them in parentheses like:

$fontDiff: (14px/16px);

Second, you can’t mix value units:

$container-width: 100% - 20px;

The above example won’t work. Instead, for this particular example you could use the css calc function, as it needs to be interpereted at render time.

Back to math, lets create a dynamic column declaration, based upon a base container width:

$container-width: 100%;

.container {
  width: $container-width;
}

.col-4 {
  width: $container-width / 4;
}

//  Compiles to:
//  .container {
//   width: 100%;
//  }
//
//  .col-4 {
//      width: 25%;
//  }

Functions

Have you ever wanted to make a cool looking button, and then taken the time to mess around on a color wheel, trying to find the right shades for ‘shadowed’ parts?

Enter the darken() function. You can pass it a color and a percentage and it, wait for it, darkens your color. Check this demo out to see why this is cool:

Nesting

One of the most helpful, and also misused features of Sass, is the ability to nest declarations. With great power comes great responsibility, so lets take a second to realize what this does, and in the wrong hands, what bad things it could do.

Basic nesting refers to the ability to have a declaration inside of a declaration. In normal CSS we might write:

.container {
    width: 100%;
}

.container h1 {
    color: red;
}

But in Sass we can get the same result by writing:

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

Thats bananas! So what if we want to reference the parent? This is achieved by using the & symbol. Check out how we can leverage this to add pseudo selectors to anchor elements:

a.myAnchor {
    color: blue;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        color: purple;
    }
}

Now we know how to nest, but if we want to de-nest, we have to use the@at-root directive. Say we have a nest set up like so:

.first-component {
    .text { font-size: 1.4rem; }
    .button { font-size: 1.7rem; }
    .second-component {
        .text { font-size: 1.2rem; }
        .button { font-size: 1.4rem; }
    }
}

If possible, don’t nest more than four levels. If you, in a pinch, have to go five levels deep, Hampton Catlin isn’t going to come to your house and fight you. Just try not to do it.

#Imports

Easily my second favorite part of Sass, imports allow you to break your styles into separate files and import them into one another. This does wonders for organization and speed of editing.

We can import a .scss file using the @import directive:

@import "grids.scss";

In fact, you don’t even really need the extension:

@import "grids";

Sass compilers also include a concept called “partials”. If you prefix a .sass or .scss file with an underscore, it will not get compiled to CSS. This is helpful if your file only exists to get imported into a master style.scss and not explicitly compiled.

#Extends & Placeholders

In Sass, the @extend directive is an outstanding way to inherit already existing styles.

Lets use an @extend directive to extend an input’s style if it has an input-error class:

.input {
  border-radius: 3px;
  border: 4px solid #ddd;
  color: #555;
  font-size: 17px;
  padding: 10px 20px;
  display: inline-block;
  outline: 0;
}

.error-input {
  @extend .input;
  border:4px solid #e74c3c;
}

Please note, this does not copy the styles from .input into .error-input.  Meet the placeholder selector.

%input-style {
    font-size: 14px;
}

input {
    @extend %input-style;
    color: black;
}

The placeholder selector works by prefixing a class name of your choice with a % symbol. It is never rendered outright, only the result of its extending elements are rendered in a single block.

Mixins

The mixin directive is an incredibly helpful feature of Sass, in that it allows you to include styles the same way @extend would, but with the ability to supply and interperet arguments.

Sass uses the @mixin directive to define mixins, and the @include directive to use them. Lets build a simple mixin that we can use for media queries!

Our first step is to define our mixin:

@mixin media($queryString){

}

Notice we are calling our mixin media and adding a $queryString argument. When we include our mixin, we can supply a string argument that will be dynamically rendered. Lets put the guts in:

@mixin media($queryString){
    @media #{$queryString} {
      @content;
    }
}

Because we want our string argument to render where it belongs, we use the Sass interpolation syntax, #{}. When you put a variable in between the braces, it is printed rather than evaluated.

Another piece of our puzzle is the @content directive. When you wrap a mixin around content using braces, the wrapped content becomes available via the @content directive.

Finally, lets use our mixin with the @include directive:

.container {
    width: 900px;
    @include media("(max-width: 767px)"){
        width: 100%;
    }
}

#

Function Directives

Function directives in Sass are similar to mixins, but instead of returning markup, they return values via the @return directive. They can be used to DRY (Don’t repeat yourself) up your code, and make everything more readable.

Lets go ahead and create a function directive to clean up our grid calculations from our grid demo:

@function getColumnWidth($width, $columns,$margin){
    @return ($width / $columns) - ($margin * 2);
}

Now we can use this function in our code below:

$container-width: 100%;
$column-count: 4;
$margin: 1%;

.container {
  width: $container-width;
}

.column {
  background: #1abc9c;
  height: 200px;
  display: block;
  float: left;
  width: getColumnWidth($container-width,$column-count,$margin);
  margin: 0 $margin;
}

Read More