Join Ray Villalobos for an in-depth discussion in this video What is Sass and Compass?, part of Responsive CSS with Sass and Compass.
So, before we get started, let's take a minute to talk about what Sass and Compass are, and why you would want to use them. We'll go ahead and start with Sass. Sass stands for syntactically awesome style sheets, and it's a language that adds functionality to CSS And it also has a CSS-like syntax, so it's super easy to learn. Finally, Sass compiles to CSS, so you can use it in any of your projects. Now here's a website where you can find out more information on Sass. So how can you use Sass in your projects? Sass allows you to do four things that are not yet supported in CSS and although there's plans to add some of these things in the future, they're not well supported in recent browsers and won't be for quite some time.
So the first one is variables. Sass allows you to create variables for your CSS. So, for example, instead of trying to remember what color #23E54 is, you can create a variable for that color called main_color, and use that anywhere in your project. Whenever you want to update the main color, you just simply change the hexadecimal value right here. Another benefit of using Sass is called nesting. It helps you organize your CSS by letting you group rules that are related together. And this works a little like CSS media query, so if you're familiar with that, this'll be pretty easy.
So here I have a series of rules for a pixel grid. So I have a ul version here, and ul and li here. As well as a style here for the images. Now, a lot of times I'll create these and I'll happen to place one of these a little bit later in my sequence of CSS. So Sass makes this a lot easier by allowing me to nest all of these inside of this pixgrid class. So I can put my ul right here, and define the ul parameters. And then the list item gets indented into this unordered list.
Again, this is very much like CSS media queries. One more way that Sass can help you is by letting you use math in your CSS. For example I can create a variable here called border_thickness and whenever I want to use a thicker version of that I create another variable called thicker and set that to whatever the border thickness use to be times 5. Then I can use either of those variables throughout my project. Now that would translate to this CSS right here. Sass even allows you to use control structures, so certain styles can be applied depending on certain parameters.
So you just say whenever you run into a list item image, set the display to block, and then include this rounded mixin. And set it to 20 pixels. So although the default is set to 10 pixels, because I've set this to 20 pixels, the output is going to have a rounded border of 20 pixels. If I don't pass a value right here, then it would just set it to the default. Now, if I just leave this at 20 pixels, then when we output this, it's going to turn my border radius and my webkit border radius to 20 pixels.
Now mixins are one of the things that makes Sass a very powerful and extendable language. And that brings us to Compass. Compass is nothing more then a group of preset mixins that run on top of Sass. When you work with Compass, it handles some of the most common mixins people use when working on the Web. So it's designed to solve common problems. So, for example, there are mixins that handle CSS support for gradients, shadows and rounded edges, the kind of stuff you may be using CSS3 Please for. In other words, Compass is a framework for writing Sass.
It just provides a bunch of shortcuts that you can use to speed up your workflow. So for example, to create a linear gradient, Compass comes with a pre-built background mixin, that you can use by passing it along the type of gradient, which is linear-gradient right here, and the direction, to bottom. And then the two colors that you want to do. And it would take care of writing the CSS that would be comparable to what you would find in CSS3 Please,which would be right here. Now, browsers do not understand Sass directly, so your Sass files will need to be converted to regular CSS.
That means that you have to come up with a workflow for using Sass. You'll need an app that processes your Sass files and converts them to CSS. I explain some of these options in the next movie. Another thing to remember is that there are two flavors of Sass: sass and scss. Now in this course we'll be using SCSS because it's the newer format. And it's a lot easier to learn and read if you already know CSS. You can actually write SCSS that looks exactly like CSS.
Sass and Compass take care of a lot of the pain of writing complex, backwards-compatible markup, and gives you a variety of tools that will streamline your workflow.
Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.
- What are Sass and Compass?
- Adding version control
- Setting up a workflow with Grunt.js
- Modularizing your Sass with partials
- Creating a color palette with variables
- Using Compass mixins
- Creating a mobile-first layout
- Creating media-query breakpoints with Susy
- Designing a responsive grid with Susy