Check your version
This collection covers a topic in which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of , but we consider it archived.
Sass is a great tool for taking your CSS to the next level. It is a CSS preprocessor, which is a class of CSS tools which are essentially a scripting language that gives CSS much greater flexibility and power, but still gives you CSS at the end of the day. More and more projects today are incorporating Sass and its companion library, Compass for the efficiency it provides. This series explains what a CSS preprocessor is, and then explores getting up and running with Sass, from installation to Sass syntax usage, along with looking at some of the powerful things you can do with Compass.
Trainer's Note: Front-end development moves fast! Many of the technologies and workflows presented here have been replaced by new methods. Check out the following resources for more up-to-date information:
In this series, we're going to be covering CSS preprocessors. Mainly we're going to be covering Sass, along with a related library, called Compass. While not used only on Drupal sites, it's a good thing to have in your arsenal of skills, especially if you do front-end design work.
To wrap everything up, we're going to show you how to extend beyond what we've covered in just the Sass and Compass basics, with other libraries that you can use with Sass.
Sass is in a class of tools called CSS preprocessors. CSS preprocessors have been around for a while now, but they've really started to gain in popularity in the last several years. In this lesson we'll find out what a CSS preprocessor is, what the benefits of using one are, and which ones are popular today.
In this lesson we're going to do a quick comparison between the two most popular CSS preprocessors in use today, Sass ad LESS. We'll look at the similarities between these two, as well as the main differences.
Whenever people speak about Sass, they normally also mention Compass in the same breath. It isn't always clear what the difference between these tools are. Compass is a library that adds lots of new features to your standard Sass setup. In this lesson, we'll discuss why you want to use Compass, then take a look at the Compass documentation and the main features that it provides for you.
In this lesson we're going to review a lot of the special terms that are used in Sass. Different categories of features you can use with Sass have their own names, and are used in specific ways in the Sass world. We're also going to take a look at scss versus sass, and get a feel for how Sass code looks before and after compilation.
In order to get started with Sass, we're going to need to install it. There is really only one major prerequisite for using Sass, and that's that you will need to have Ruby installed. Ruby is a very popular language, which Sass is written in. Ruby is easy to install, and once you have it installed, you won't need to really work with Ruby directly. Some systems come with Ruby already installed, like OS X, but if you don't have Ruby installed it only takes a few minutes. In this lesson we will be installing Sass and Ruby on Windows, because Windows does not have Ruby installed for us already. Once we have Ruby installed, we'll use the command line to quickly install Sass, which is the same on all systems. Then we'll do a quick test to make sure it is working properly. There are apps that you can use to do all of this for you using a GUI, but we want to start with the fundamental pieces, and we'll cover the GUI applications in another lesson.
Now that we have Ruby and Sass ready to go and working, let's also get our handy dandy mixin library, Compass, installed as well. We'll be using the command line in this lesson, but it's super simple to get this installed, and then we'll create a project to make sure everything is firing correctly. We'll look at a GUI tool to do this in another lesson.
We've looked at how easy it is to set Sass and Compass up from the command line, but for folks who prefer a nice GUI application, there are a few options available. Scout is a free Sass/Compass application that works cross-platform. In this lesson, we'll get Scout set up and see how it works to watch our projects.
Notes on Installing Scout:
- On OSX, If you double-click the .dmg and you get an error message saying you can't open this because it's from an unrecognized developer, control-click on the .dmg and select "Open" from the menu, then select "Open" from the dialogue box to open the .dmg installer.
- After installing Scout, OSX may again prevent you from opening it (depending on your security preferences) when it auto-opens it after installation. Navigate to where you installed it (i.e. "Applications"), control-click on the Scout icon, select open from the menu, and select "Open" from the dialogue box once again.
- If you get an error about Java, "No Java runtime present, requesting install," see the Scout GitHub issue queue for a solution.
Sass has a neat way of managing comments, where you can choose to either compile the comments, or not, from your scss. We're going to take a quick look at the two comment styles, and see how they appear (or don't) in our finished, compiled CSS.
Sass' nesting feature makes it easy to organize your CSS in a way that makes it clear which selectors are related and generally provides a cleaner, clearer stylesheet. In this lesson we'll look at nesting, how to use it, and talk about making sure you don't nest unnecessarily.
One of the big advantages to using Sass is being able to reuse code. The simplest form of this is using variables. Variables in Sass work just like they do in other scripting languages. You simply assign a value to a variable name and then you can use that variable name anywhere you like. This is super helpful for doing things like defining the hex value for the color "blue" and then you can use the name "blue" wherever you want to use that hex value. This makes it easy to update that value in one place instead of having to find every instance of it and update all of them.
A mixin is a term used for a feature of preprocesors which acts a lot like a super-variable. You can write up larger chunks of CSS and assign them to a mixin name, then when you "include" that mixin, it will inject all of that CSS into the location. This is great for setting up common ways of displaying things, or handling common problems, and then just reusing that same method throughout. You can also add arguments to your mixin so that you can tweak the output according to your use case. This takes the reusable concept of variables up a notch.
Functions are another form super-variable, as it were, where you do a bunch of work that is assigned to something you can print out. But in this case you aren't injecting a bunch of CSS, instead you are just printing out a nice, final value. For many things you will want to do with functions, someone else has probably already written it. Sass comes with a lot of predefined functions for you to use, and there are libraries, like Compass, which provide many more. We'll take a look at some of the functions that Sass provides for us and see a function in action, along with our mixin, side by side, to really see the difference between them.
When working with your CSS you will often have instances where something should include all of the styling associated with a class, in addition to a few extras that are specific to just that item. In regular CSS you would normally put the general class on the item, and add a more specific class with the additional styling. With the Sass @extend directive, you can have the more specific class inherit the styling of another class, so that you can just use the specific class in your HTML, keeping you HTML markup nice and concise.
Sass partials are a way to break out your Sass code into multiple files, and then import them to be compiled into one master CSS file. This feature helps you organize your Sass code the way that makes the most sense for you while working.
When you install Compass from the command line, or with certain apps, it comes with a special file names "config.rb" which is where Compass stores the various ways you can configure it to work with your project. Not all apps will create this file for you however, and it is a good thing to create and understand. In this lesson, we'll take a look at this file and explain the most common configuration options.
When you install Compass, in addition to a large mixin and function library, you are also installing a command line application. The commands that Compass provides make it easy to do common tasks, very quickly from the command line — things like creating a new project, and compiling your Sass into regualr CSS. Even if you are not familiar with the command line, these are very simple to use.
In this lesson we take a look at compass mixins. We concentrate on a single mixin in the Typography category to show how a compass mixin can save lots of time and make your sass file much cleaner. We will take a look at how to create a horizontal list with a single include that handles all the necessary floats, paddings, margins, and everything we normally write in CSS but is now just a mixin away.
Sass is our base tool, and Compass is almost always used with Sass. Compass provides some great tools for us, but there are a few more resources out there that are worth knowing about and taking a look at. In this lesson we'll take a quick tour of some grid frameworks designed to work with Sass, as well as another popular mixin library.
In this lesson we take a tour of some other tools for working with Sass and Compass. We look at some sites with good information or helpful tools to use, and a few different apps that are made to make your workflow better. We can't cover everything out there, but these are tools that we've used ourselves, or are generally popular right now. There will always be more cool things coming out to help you be more efficient when working with Sass and Compass, but these should get you looking in the right direction.