Screencasts

Introduction to Sass: Part 1

Download Files ↓

Show Notes

In this screencast we’re going to show how Sass can simplify, structure and speed up your styling workflow.

Like Haml, Sass is the brain child of Hampton Catlin and stands for Syntactically Awesome Stylesheets.

And it lives up to it’s name, Sass stylesheets are awesome! Watch this screencast to find out why!

Links

What you'll learn

  • How to use Sass and it's core features including: variables, mixins, nesting and selector inheritance
  • The differences between Sass and SCSS (Sassy CSS)
  • How to convert pre-existing CSS into Sass

You may also be interested in our Introduction to Haml screencast.

Update: If you enjoyed Part 1, you should check out Part 2 where we go in to more detail on what Sass has to offer.

Script

Introduction to Sass

Today we’re going to show how Sass can simplify and speed up your styling workflow. You may also be interested in our Introduction to Haml screencast available on Screencasts.org.

What is Sass?

Like Haml, Sass is the brain child of Hampton Catlin and stands for Syntactically Awesome Stylesheets.

And it lives up to it’s name, Sass stylesheets are awesome!

CSS: Have You Ever Had To...

Have you ever had to do a find-and-replace in your stylesheet to change a hex color for a client?

Have you ever had to pull out your calculator to figure out a column width in a multi-column design?

Sass overcomes these issues with the introduction of variables, mixins, nestings and selector inheritance.

Sass looks similar to CSS, but without the semi-colons and parentheses.

#sidebar_ad {
  display: block;
  width: 250px;
  height: 150px; }

#banner_ad {
  display: block;
  width: 720px;
  height: 90px; }
#sidebar_ad
  display: block
  width: 250px
  height: 150px

#banner_ad
  display: block
  width: 720px
  height: 90px

Like Haml, Sass uses two-space indentations to define code nesting.

OK, so now that you see how to write Sass, let’s look at what makes Sass so awesome.

Variables

This is what a variable looks like in Sass:

$blue: #3bbfce

Variables are declared by placing a dollar sign in front of the name.

You can manipulate variables with Sass’s built-in functions like darken and lighten.

In this example the paragraphs will be a darker blue than the h1s.

$blue: #3bbfce
$fontsize: 10px
h1
  color: $blue

p
  color: darken($blue, 10%)

p.manual
  color: $blue - #111
  font-size: $fontsize + 10px

You can also add and subtract variables of the same type from each other. For example if we wanted to manually darken a color slightly all we would do is subtract away #111. If we wanted to increase a font size by 10px all we would do is add it.

Nesting

$fontsize: 10px

.column
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .location
    font:
      size: $fontsize

There are two types of nesting. The first type is called “selector nesting”. This is where we structure our Sass as a nested structure, similar to how you would nest your HTML or Haml. Looking at the generated CSS side-by-side, you can see that nesting the .name class under the .column class generates the CSS selector .column .name.

.column .name {
  font-weight: bold;
  font-size: 20px; }
.column .location {
  font-size: 10px; }

The second type is “property nesting”. You can nest properties that start the same. In our example here we have font: then a new line and two spaces, and then what you’d normally put after the hyphen. So when we write font: a new line, two spaces, then weight:, it becomes font-weight:. This behavior works for all hyphenated selectors.

Using nesting like this is a great way to organise and structure your CSS, and keeps your code DRY.

Mixins

Another great feature of Sass is Mixins.

@mixin border-radius($amount: 2px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amount

h1
  @include border-radius(5px)

.column
  @include border-radius

Mixins allow you to reuse whole blocks of properties and selectors, and you can even pass arguments to them. You can also specify default values. To define a mixin, use the @mixin keyword, followed by the name of the mixin. Then, if you require parameters, include parentheses and name your arguments. If you want to add a default value, add a colon followed by the desired value.

To include the mixin, use the @include keyword followed by the name of your mixin with any parameters declared in parentheses.

This SASS will get compiled down to this CSS.

h1 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

.column {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px; }

We specified the radius in h1, but for the .column we didn’t specify anything, so in this case, the default value was used.

Selector Inheritance

The final feature we’re going to talk about today is “Selector Inheritance”.

h1
  border: 4px solid #ff9aa9

.column
  @extend h1
  border-width: 2px 

With selector inheritance you can tell any selector to inherit all the styles from another selector. To use it, type the keyword @extend, followed by the selector you want to inherit from, and all of the selector’s styles will be inherited.

Installation

To get started with Sass, simply install it by running gem install haml. Sass is actually still included in the Haml gem, but this is set to change with version 3.1. Sass will then be it’s own RubyGem.

You can use Sass as a command line tool to output & process your Sass into CSS. You can do this by typing sass followed by --watch (which means it’ll watch for changes) followed by your Sass files folder, followed by your output CSS folder. sass --watch sass_folder:stylesheets_folder

So we have a folder that contains our Sass files, and an empty stylesheets folder. We start the watcher, and as you can see, it outputs the CSS. If we make a change to the Sass file it overwrites the CSS.

Try Sass Online

You can also try Sass online without installing it by visiting sass-lang.com/try.html

Sassy CSS

What we’ve gone over so far is Sass. However, there is a new format called Scss, or Sassy CSS. The difference between the two is that Sassy CSS looks more like what you’re probably used to with CSS, but it has “Sassy” features like variables, mixins, nesting and selector inheritance.

To convert Sass to Sassy CSS manually, you’ll need to rename your .sass file to .scss. You’ll also need to Include a semi-colon at the end of every value, and include squiggly-brackets.

So the following Sass would look like this in SCSS.

$blue: #3bbfce
$fontsize: 10px
h1
  color: $blue

p
  color: darken($blue, 10%)

p.manual
  color: $blue - #111
  font-size: $fontsize + 10px
$blue: #3bbfce;
$fontsize: 10px;

h1 {
  color: $blue; }

p {
  color: darken($blue, 10%); }

p.manual {
  color: $blue - #111;
  font-size: $fontsize + 10px; }

As you can see they’re similar, but there’s more opportunity for errors if you forget the semicolons.

It can also get messy with the closing brackets, as you’ll see in a minute from our previous demo.

We personally prefer Sass’ syntax to Sassy CSS’, but we’re showing this for completeness. Both of these syntaxes will be supported going forward in Sass 3. So feel free to use the syntax that works best for you: Sass for code that’s more concise, or SCSS for code that’s more similar to CSS.

We’ll include a download in the show notes for the Sass featured in today’s episode, along with the SassyCSS equivalent for comparison.

So this is how you use Sassy CSS.

Type sass --watch, and then the folder where your Sassy CSS is stored, and then the output folder. sass --watch scss_folder:stylesheets_folder

Here’s a comparison between Sass and Sassy CSS side by side...

//Global variables
$padding: 20px
$fontsize: 30px

//Colors
$blue: #3bbfce
$background-color: lighten(#fff - $blue, 45%)

//For 2 column layout
$container-width: 960px
$column-width: ($container-width - $padding * 2) / 2 - $padding * 2

//Mixins
@mixin border-radius($amount: 20px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amount

#container
  width: $container-width
  margin: auto
  h1
    font-size: $fontsize + 20px
    color: darken($blue, 30%)
    background-color: $background-color
    @include border-radius(5px)
    padding: $padding
  #left_column
    float: left
  #right_column
    float: right
  .column
    width: $column-width
    @include border-radius
    background-color: $background-color
    padding: $padding
    .name
      color: darken($blue, 10%)
      font:
        weight: bold
        size: $fontsize + 10px
    .location
      color: $blue
      font:
        size: $fontsize
//Global variables
$padding: 20px;
$fontsize: 30px;

//Colors
$blue: #3bbfce;
$background-color: lighten(white - $blue, 45%);

//For 2 column layout
$container-width: 960px;
$column-width: ($container-width - $padding * 2) / 2 - $padding * 2;

//Mixins
@mixin border-radius($amount: 20px) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount; }

#container {
  width: $container-width;
  margin: auto;
  h1 {
    font-size: $fontsize + 20px;
    color: darken($blue, 30%);
    background-color: $background-color;
    @include border-radius(5px);
    padding: $padding; }
  #left_column {
    float: left; }
  #right_column {
    float: right; }
  .column {
    width: $column-width;
    @include border-radius;
    background-color: $background-color;
    padding: $padding;
    .name {
      color: darken($blue, 10%);
      font: {
        weight: bold;
        size: $fontsize + 10px; }; }
    .location {
      color: $blue;
      font: {
        size: $fontsize; }; } } }

...as you can see the more you nest the more confusing the closing of parentheses can get. While it may look similar to what you’re used to in CSS, it doesn’t really feel right to us. But the choice yours. Either will help you out in your development career.

Because Sass and Sassy CSS can be pre-compiled before deployment, you can use these tools with any programming language you might use to build your web app.

There are however some considerations when deploying with Rails. In some production environments Sass can be compiled on the fly with the first request. However, some hosts such Heroku don’t allow write access to the public directory, so you have to pre-compile before adding to version control and deployment.

Converting CSS to Sass using sass-convert

Sass also comes with a command line tool which converts your current CSS into valid Sass or Sassy CSS.

Type in sass-convert --from css (which is the format you wish to convert from, then) --to sass (which is format you want to convert to, then) -R (which means recursively convert all files in the directory) (then dot) . (which is the current directory)

And that’s how to use Sass to simplify and structure your layout code.

We hope you’ve enjoyed this introduction to Sass. We’re planning on releasing more Haml and Sass Screencasts in the coming weeks.

Thanks for watching! Subscribe to our RSS feed, follow us on Twitter, and please leave any questions, comments or suggestions for new screencasts in the comments below. If you like our videos like us on Facebook and feel free to join the conversation there.

See you next time!

← Latest Episodes

blog comments powered by Disqus