Imageblog

Back to Blog
Back to Blog
  • Web
  • Web

Sass: CSS with Superpowers!

By Thad Bloom

Avatar for Thad Bloom
Share on:

Sometime around April of last year, our development team adopted using Sass as a CSS preprocessor in our development workflow. At first, I was apprehensive to change my old school method of writing code. That quickly changed after completing my first project utilizing the features of Sass.

What exactly is Sass?

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
– http://sass-lang.com/

What can I do with Sass?

Sass comes bundled with a plethora of features, including:

  • Pre-processing: You will write your code in .sass or .scss file extensions, save it, and out will come a normal .css file that you will serve on your website.
  • Variables: Consider variables as a way to store information that you will reuse throughout your entire stylesheet. You can store colors, fonts, or any CSS value that you will reuse. Need to change a color throughout your stylesheet? You can change the variable value in one spot. This is great for organization and consistency in design.
  • Nesting: You can “nest” your CSS selectors in a way that follows the hierarchy of your HTML. This is one of my favorite features of Sass. I use it to nest my media queries when coding a responsive website. Before using Sass, I would constantly scroll up and down my CSS file looking for the media query that I needed to modify.
  • Partials: Create partial Sass files that contain small snippets of CSS that you can use in other Sass files. This helps you modularize your CSS and keeps your project easier to maintain.
  • Import: Similar to a regular CSS import, but without the extra HTTP request that will slow down load times on your website. When compiling your code, all of your Sass files are combined into one CSS file. Awesome!
  • Mixins: With the many different vendor prefixes, writing CSS3 styles can be redundant. You can use a mixin to cut out the extra vendor prefixes. Mixins can also be useful for other things, I use one for every project that does the math required to create a responsive layout for me. Sound interesting? Take a look: Column Mixins with SCSS
  • Extend/Inheritance: Using @extend lets you share a set of CSS properties from one selector to another. This saves time and helps you better organize your code.
  • Operators: Operators allow you to use math with your CSS. You can see an example in my Column Mixins with SCSS Codepen referenced earlier.

How can I get started using Sass?

First, you have to install Sass. You can do this with either an application or via the command line on your machine. Check out the Sass website to see which is right for you: http://sass-lang.com/install

Resources

This post is just an introduction to Sass. If you want to learn more, here are some excellent resources and tools:

  • Official Sass Website – Straight from the horses mouth!
  • Sass Reference – Better Sass documentation that I discovered.
  • The Sass Way – A great tutorial website dedicated to Sass.
  • Compass – A framework that makes Sass even better.
  • Bourbon – A Sass Mixin Libary
  • Sassy Buttons – Create beautiful CSS3 buttons with minimal effort.
  • Breakpoint – Makes writing media queries in Sass a walk in the park.
  • Sassmeister – See how your Sass is compiled into CSS
  • SassMe – Visualize Sass color functions in real-time without compiling a single line.