Introduction to Sass: Part 1
In this screencast we’re going to show how Sass can simplify, structure and speed up your styling workflow.
And it lives up to it’s name, Sass stylesheets are awesome! Watch this screencast to find out why!
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.
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.
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.
This is what a variable looks like in Sass:
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.
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.
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
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.
Another great feature of Sass is Mixins.
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.
We specified the radius in
h1, but for the
.column we didn’t specify anything, so in this case, the default value was used.
The final feature we’re going to talk about today is “Selector Inheritance”.
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.
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
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.
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.
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...
...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.
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.
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!