What is Sass? Syntactically Awesome Stylesheets Explained

user Giselle

date 27 May 2014

What is Sass? Syntactically Awesome Stylesheets Explained

Sass stands for Syntactically Awesome Style Sheets. After a quick look, I thought that it was better suited to larger sites and involved programming. After a second look, the scales fell from my eyes. Sass organizes your stylesheets efficiently and drastically cuts down on your development time. It uses some programming tools, e.g. variables, while being accessible to non-programmers.

We offer Sass Training as a private course for individuals who already know CSS and want to start working faster and better with their stylesheets.

What is Sass?

Sass is a CSS preprocessor. You start off by creating a Sassstylesheet, e.g. style.scss. You then use an app or the command line to output that file into a normal CSS file, e.g. style.css.

How does Sasswork?

Instead of doing this:

body {
color: #00ff00;
}
h1 {
color: #00ff00;
}
a {
color: #00ff00;
}

Define an SCSS variable and do this:

$color-green: #00ff00;
body {
color: $color-green;
}
h1{
color: $color-green;
}
a {
color: $color-green;
}

To update all instances of that colour, simply change the variable value:

$color-green: #00ffCC;

Or, what about this:

Define a mixin (a chunk of reusable CSS):

@mixin heading-style {
margin: 0 0 30px 0;
font-size: 2em;
font-weight: bold;
}

To use this mixin elsewhere in the stylesheet, do this:

article h2 {
@include heading-style;
}

This compiles to:

article h2 {
margin: 0 0 30px 0;
font-size: 2em;
font-weight: bold;
}

And you can reuse it later on:

aside h3 {
@include heading-style;
}

What if you’d like to split your main stylesheet into logical sub-files? Divide your main .scss file into sub-files and import them into it like this:

@import "reset.scss";
@import "variables.scss";
@import "mixins.scss";
@import "typography.scss";

There’s a lot more to Sass. The great thing about it is that it’s quick and easy to learn the basics. You’ll start saving time right away. You can then move onto even better things at your own pace. Once you’ve tried it, you won’t want to go back. What are you waiting for?