LearnThe Absolute Beginner’s Guide to Sass

What is Sass?

Sass stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin.

It’s a way to simplify your CSS workflow, making development and maintenance tasks easier.

For instance, have you ever had to do a find-and-replace in your stylesheet to change a particular HEX color for a particular indecisive client?

Or had to open up the calculator app to figure out a column width in a multi-column design?

Sass introduces new concepts such as variables, mixins, nestings and selector inheritance.

Sass looks similar to CSS, but without the semi-colons and curly braces.

Given the following CSS:

#skyscraper_ad
{
  display: block;
  width: 120px;
  height: 600px; 
}

#leaderboard_ad 
{
  display: block;
  width: 728px;
  height: 90px; 
}

You’d write the following in Sass:

#skyscraper_ad
  display: block
  width: 120px
  height: 600px

#leaderboard_ad 
  display: block
  width: 728px
  height: 90px

Sass uses two-space indentations to define code nesting.

Now that you see how Sass is written, let’s look at some of the things that makes Sass so awesome.

Variables

To declare a variable in Sass you do $ followed by the name of the variable, in this case red, a colon and then the value of that varible.

$red: #FF4848

Sass has built-in functions like darken and lighten that you can use to modify variables.

In this example the paragraphs will be a darker red than the h1 tags.

$red: #FF4848
$fontsize: 12px
h1
  color: $red

p
  color: darken($red, 10%)

You can perform operations such as add and subtract variables of the same type. If we wanted to manually darken a color slightly all we would do is subtract away a small HEX value say of #101. If we wanted to adjust a font size by 10px all we would do is add it.

p.addition_and_subtraction
  color: $red - #101
  font-size: $fontsize + 10px

Nesting

There are two types of nesting.

Selector Nesting

“Selector nesting” is the first type of nesting.

Nesting your Sass is similar to how you would nest your HTML.

$fontsize: 12px

.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

If you look at the generated CSS, you can see that nesting the .name class under the .speaker class generates the CSS selector .speaker .name.

.speaker .name {
  font-weight: bold;
  font-size: 22px; }
.speaker .position {
  font-size: 12px; }

Property Nesting

“Property nesting” is the second type of nesting.

You can nest properties with the same prefix.

$fontsize: 12px

.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

In the above example here we have font: and then on a new line and an extra indentation of two spaces, and then what you’d typically put put after the hyphenated prefix.

So when we write the property font: a new line, an extra two spaces, the property weight:, it becomes the CSS property of font-weight:.

.speaker .name {
  font-weight: bold;
  font-size: 22px; }
.speaker .position {
  font-size: 12px; }

All hyphenated selectors are supported.

Nesting like this is an awesome way to organise and structure your CSS, and keeps you from unnecessarily repeating yourself.

Mixins

Mixins are another awesome feature of Sass.

Mixins allow you to reuse whole blocks of Sass code, you can even pass arguments to them! What’s also cool is that you can specify default values.

To define a mixin, use the @mixin Sass keyword, followed by the name you’ve chosen for the mixin. If you require any parameters, include a pair of parentheses and your arguments. If you want to add any default values, add a colon followed by the desired value.

Including the mixin is easy, use the @include Sass keyword followed by the mixin name with any parameters declared in parentheses.

Take the following example:

@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amount

h1
  @include border-radius(2px)

.speaker
  @include border-radius

The above Sass will get compiled down to the following CSS:

h1 {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2x; }

.speaker {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }  

We specified the radius in h1, but for the .speaker we didn’t specify anything, therefore the default of 5px is used.

Selector Inheritance

Selector Inheritance allows you to tell any selector to inherit all the styles from another selector, which is pretty awesome.

To use it, use the Sass keyword @extend, followed by a selector you want to inherit from, and all of the selector’s style properties will be inherited.

h1
  border: 4px solid #ff9aa9

.speaker
  @extend h1
  border-width: 2px 

The above is compiled to:

h1, .speaker {
  border: 4px solid #ff9aa9; }

.speaker {
  border-width: 2px; }

Try Sass

Try Online

You can also try Sass online without installing it on your local machine.

You need to select the Indented Syntax at the bottom before rendering.

Installation

Sass is a Ruby gem. Assuming you have Ruby gems installed simply run gem install sass in your terminal.

Sass can be used as a command line tool to process your Sass files into CSS files.

You can do this by typing sass --watch sass_folder:stylesheets_folder where sass_folder is the folder of where your sass files are kept (file extensions must be .sass) and stylesheets_folder is your output folder. The --watch option means it’ll watch this folder and if we make any changes to files they will get converted as soon as you save them.

Converting CSS to Sass

You start using Sass in your exisiting projects by using sass-convert.

Enter the folder you want to convert in your terminal and type in sass-convert --from css --to sass -R . where -R means recursively and . means the current directory.

A Note on Sassy CSS (SCSS)

In this post I’ve only covered the Sass Indented Syntax. However, there is a newer format called SCSS, or Sassy CSS. The difference is that Sassy CSS looks more like what you’re used to with CSS, but it has “Sassy” features like variables, mixins, nesting and selector inheritance.

Conclusion

Sass is really awesome at keeping your styling well structured and DRY. There’s even projects like Compass that uses mixins to include CSS frameworks rather than cluttering your HTML with unsemantic classes.

So what are you waiting for? Try Sass in your next project!

• code
• css
• css preprocessors
• css3
• learn programming
• make a website
• sass
• web design