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
To install Sass, read the official Sass guide or if you’re trying to install Sass at your workplace and have issues due to your network firewall, read my previous blog post.
There are numerous ways to compile Sass. There’s the Command Line/Terminal or GUI’s such as Koala, Scout, Prepos and Codekit. Read the official Sass guide on the best way to compile your Sass to CSS.
I’ll briefly discuss some of the useful features of Sass:
Let’s begin to start using Sass!
Nesting
You can nest CSS rules inside each other instead of repeating selectors in separate declarations.
Play with this gist on SassMeister.
http://static.sassmeister.com/js/embed.js
Nesting – Referencing Parent Selectors with &
Sass adds the ability to reference the current parent selector using the ampersand as a special placeholder.
An example of using the ampersand to reference the parent selector for a link and hover:
Play with this gist on SassMeister.
http://static.sassmeister.com/js/embed.js
Variables
As described in the Sass Basics website.
“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.
We could even lighten the color, for example;
Play with this gist on SassMeister.
http://static.sassmeister.com/js/embed.js
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.
Mixins
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.
Here’s an example for border-radius.
Play with this gist on SassMeister.
http://static.sassmeister.com/js/embed.js
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.
@extend
We can use Sass’s @extend function to “chain together” styles that are shared amongst multiple selectors.
Use @extend when you want to store multiple static properties and pass them to selectors, it lets you share a set of CSS properties from one selector to another.
Play with this gist on SassMeister.
http://static.sassmeister.com/js/embed.js
Placeholders
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 %.
Play with this gist on SassMeister.
http://static.sassmeister.com/js/embed.js
We can call this rule set in other classes using @extend.
Partials
“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
@import
“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
SCSS
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
/* base.scss */
@import "reset";
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
}
When you import a file you don’t need to include the file extension .scss. Sass is smart and will figure it out for you. When you generate the CSS you’ll get:
CSS
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
background-color: #efefef;
font-size: 100% Helvetica, sans-serif;
}
@extend vs mixins
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.
References
- Sass
- Sass – Basics Guide
- Sass Documentation
- Sass for Web Designers – A List Apart
- Getting started with Sass – A List Apart
- Assembling Sass – Code School
Adeline Yaw 