Why You Scared of Sass?

During a discussion a few weeks ago with an amazing front-end developer I was blown away that they hadn’t even given CSS preprocessing a go. I was bamboozled.

Learning something new, be it Sass, Less, YUI, Grunt, etc can always be a little daunting but making the time to ‘try’ is an important part of developing for the web.

If you get overwhelmed with all these new fandangle ‘things’ people are talking about, be mindful that you don’t necessarily have to adopt them. Having a basic understanding and awareness of what they do is all you really need to know. If the ‘thing’ really fits into your development workflow, then it’s a win. Dedicating more time to really learn and adopt it should be a no brainer. If it doesn’t, then at least you have the peace of mind that you’re not doing things in a inefficient manner.

This brings me to Sass. So many amazing tools, libraries and resources have been released during the last 18 months it is truly mind boggling. But the winner for me is Sass. The amount of impact this has had on my day-to-day development has been astronomical.


WTF is Sass?

Sass (Syntactically Awesome Style Sheets) is built on top of CSS enabling, you to do more powerful things with your sites style sheets. Constructing your styles in Sass is just another way to writing CSS.

The Sass language is developed in a way to help you reduce repetition with your CSS and save you time.

Basically you write your Sass in the set syntax and it compiles to CSS.

Sass helps you write better CSS


Why Sass?

There are a few other competing projects that do a very similar thing to Sass. For me this post on CSS-Tricks is a must read if you are sitting on the fence. Should you use Sass? Well that depends. Do your research, talk to others and pick what is best suited to your workflow. But if you write lots of CSS you should definitely give it a look.


Setting up Sass

It’s pretty painless.

To get started download this very basic folder structure which has some prewritten Sass files. Or, if GitHub is more your thing you can clone the repository.


website/
|-- index.html
|-- css/
|   |-- styles.css
|-- styles/
|   |-- _normalize.scss    #normalize styles
|   |-- _base.scss         #your Sass
|   |-- styles.scss        #primary Sass file

Note: the .scss filename extensions.

In order to install Sass, you need to have Ruby installed. If you’re using a Mac, it’s already installed. Unfortunately Windows doesn’t come with Ruby and you will need to install it via RubyInstaller.

Open up the terminal and run this command to install Sass:

gem install sass

Navigate to inside the downloaded template folder and run the following command in the terminal to translate the Scss files into one CSS file.

sass --watch style.scss:style.css

Now whenever you change style.scss (which imports other .scss files), Sass will automatically update style.css with the changes.

To take things a little further and utilise the power of Sass, Sass allows you to choose between four different output styles by using the --style command-line flag.

sass --watch styles/:css/ --style OPTION

The options being: nested, expanded, compact, compressed.

To have Sass minify all your CSS just use:

sass --watch styles/:css/ --style compressed

But I Hate the Terminal!
If this is the case I would suggest looking into CodeKit or LiveReload if you are based on a Mac. If you are on a Windows machine then Scout looks good.


The Basics

Sass makes CSS fun again

Sass is an extension of CSS3, adding nested rules, imports, variables, mixins, selector inheritance, and more.

With any language there is so much to learn but understanding the basics always comes first. Hopefully the sections below enlighten you to the power of Sass.


@import

There are few ways to use @import within Sass files but importing various style sheets into one is how I mainly utilise it.

If you have a Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

For example, in the download provided. The styles.scss imports, normalize and base.


@import "normalize";
@import "base";

These are two different scss files.

  • _normalize.scss
  • _base.scss

Doing this is a super convenient when the project you are working on has lots of components. Separating the styles for development just makes sense.

It’s also possible to import multiple files in one @import. For example, the styles.scss file could be rewritten like:

@import "normalize", "base";

Variables

Sass allows variables to be defined. This is wicked!

If you use the same values all over the place, why not just set up variables and easily manage them.

Variables begin with a dollar sign $ and the variable assignment is done with a colon :.


$dark: #333333;

p {
    color: $dark;
}

p {
    color: #33333;
}

I generally think it’s a good idea to declare the variables at the top of a file. Doing so makes them easy to manage.


Nesting

Sass allows nested selectors and properties within each other. Used correctly they can avoid large amounts of repetition. Used incorrectly, they can introduce performance issues.


#logo {
       background:{
       color: red;
       image: url("url");
       repeat: no-repeat;
   }
   a {
      text-decoration: none;
    }
}

#logo {
   background-color: red;
   background-image: url("url");
   background-repeat: no-repeat;
}

#logo a {
   text-decoration: none;
}

One thing to remember when nesting. If you are nesting more than about 3 levels deep, maybe you are doing it wrong…


Referencing Parent Selectors

Referencing parent selectors by using the ampersand (&) can be a powerful tool, if used right.


#header a {
  font-size: 20px;
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}

#header a {
  font-size: 20px;
  text-decoration: underline;
}
#header a:hover {
  text-decoration: none;
}

Cool hey! No need to write out the #header a again.


Mixins

Mixins are one of the most powerful Sass features. Mixins allow for efficient and clean code repetitions, as well as an easy way to adjust your code.

Mixins are defined using the @mixin rule which takes a block of styles that can then be included in another selector using the @include rule.


@mixin clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }

  // For IE 6/7 (trigger hasLayout)
  }


#logo {
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
}


#logo {
    padding: 4px;
    margin-top: 10px;
}

#logo:before,
#logo:after {
    content: " ";
    display: table;
}

#logo:after {
    clear: both;
}

#logo {
    *zoom: 1;
}

If you find yourself writing some rules more then twice, then it might be worth creating a mixin.

The above is just the tip of the iceberg into what mixins can do.


The Deal Breaker

If I had to pick one feature to ‘show off’ to someone that still wasn’t convinced then it would be a media query mixin for various screen sizes referenced directly inside a CSS element.


@mixin breakpoint($point) {
  @if $point == large {
    @media (max-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (max-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (max-width: 37.5em)  { @content; }
  }
}

#header {
  width: 75%;
  @include breakpoint(large) { width: 60%; }
  @include breakpoint(medium) { width: 80%; }
  @include breakpoint(small) { width: 95%; }
}


#header {
    width: 75%;
}

@media (max-width: 64.375em) {
    #header {
        width: 60%;
    }
}

@media (max-width: 50em) {
    #header {
        width: 80%;
    }
}

@media (max-width: 37.5em) {
    #header {
        width: 95%;
    }
}

Rad hey!

At first I was a little sceptical about writing media queries this way. In the past I had a dedicated section in my style sheet for all the specific @media rules. But its been well over 4 months now with this method and it just makes sense whist styling. Also the ease of maintainability is amazing.


Onwards

Sass is super powerful and has completely revitalised the way I currently approach my styling. The above covers just the basics, but hopefully will give you an insight into its capabilities. I believe Sass is not for everyone, but if you are searching for ways to improve your development workflow and are keen broaden your skill set, then it can’t hurt to investigate.

9 Comments

  1. Very good article Jake. I was also very skeptical about SASS. Having a PHP background, it seems very good and natural to me.

    My first reaction looking at this line $dark: #333333; was WOW.

  2. Jake, I had the same experience as you have here. I was hesitant and first but gave it a go and for all those examples that you’ve outlined i’ve made the switch.

    And once I did make that switch (which was fairly painless) I’ve never looked back.

    The only thing I need to get working is dev tools to reference the .sass files somehow?

  3. This triggered a sense of urgency to get started with SASS. I use Less in my day to day work but was keen to get started with SASS. This article has done the heavy lifting for me.

  4. Wow… that ‘Deal Breaker’ bit is freakin’ awesome. I’ve only started playing w/ Sass recently but that mixin kicks so much ass. [copied, saved to snippet collection]

    • Good to hear Daniel!

  5. If you are new to Sass and are looking for a simple to follow introduction to Sass with editable examples, please checkout this Slide Deck I put together. If you pull down the PDF, there are links in the slides to a tutorial example and editable SassMeister code examples.

    https://speakerdeck.com/anotheruiguy/sass-101-a-newbs-guide

This post currently has 9 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

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