Learning Sass

What is Sass?

“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” – Sass

“Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here’s an example:”

When the Sass is processed, it takes the variables we define for $font-stack and $base and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

So the advantage is, if you need to update your brand colour, you just have to adjust the $base variable once in your SCSS file and not have to do a search and replace for all instances of that particular color.

Where variables let you define and reuse values throughout the stylesheet, mixins allow you to define and reuse blocks of styles. Instead of typing the same rules multiple times in various declarations, use mixins to define a group of styles just once and refer to it anytime those styles are needed.

In addition, writing CSS3 can be tedious to write as there are many vendor prefixes that exist. So mixins lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

To create a mixin you use the @mixin directive and give it a name. We’re also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Please note if you are using Compass with Sass, you can easily use Compass’ mixin ‘border-radius’ instead of creating your own. You just have to @import “compass” or @import “compass/css3/border-radius in your Sass file. Read the Compass reference for more information on how to use Compass. I’ll be discussing Compass in a future blog post.

Placeholder are helpful in creating blocks of styles for design patterns that may or may not be used (eg. in frameworks or templates). Placeholders allow you to define “phantom” classes that won’t appear in your outputted CSS. You can reference placeholders using @extend.

For example, lets create a class for a block of styles that define a button.

We’ll use a placeholder selector, which prefixes the class name with a %.

“You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.SCSS. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.” – Sass Basics

“Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file.” – Sass Reference

“Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.” – Sass Basics

Where a mixin will write the same rules in each declaration it’s called from, @extend will create multiple, comma-separated selectors for shared styles. It’s good to keep this difference in mind when you’re deciding which to use.

Now to apply all of this in your projects!

Hopefully you’ve got a better understanding of how powerful Sass can be. I’ve only scratched the surface and have used extremely simple examples using the basics of Sass. There are advanced functions on top of what I’ve outlined in this blog post, for example; advanced and functions.

About

Adeline is a mum of two boys (and two burmese cats) living in Sydney, Australia. She loves to play with her kids and watch all kinds of sports, especially AFL, basketball and tennis. She also loves sushi and is a big green tea drinker.