What is Sass? Guide to CSS with superpowers

Writer and developer Tammy Coron explains what Sass is, and why you should use it.

Beginners or those who have taken a break from web design for a few years may not know what Sass is, but we're here to help explain with this guide to those starting out or in need of a refresher.

However, before jumping into this article, I feel like a quick public service announcement is in order: if you're new to CSS, I do not recommend using any extensions, preprocessors or frameworks. While it's true they offer many advantages, it's more important that you first understand the basics of CSS; please do not skip this crucial step of learning the core concepts.

What is a CSS preprocessor?

A scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Some examples of CSS preprocessor include: Sass, LESS and Stylus.

What is Sass?

What is Sass?

Sass is arguably the most useful of all CSS extensions

Sass (Syntactically Awesome StyleSheets) is an extension of CSS. Sass allows you to use things like variables, nested rules, inline imports and more. It also helps to keep things organized and allows you to create stylesheets faster.

The only requirement for using Sass is that you must have Ruby installed. They also ask that you follow the Sass Community Guidelines.

Sass Usage

The following section outlines basic usage and uses examples from the official Sass website. See the Sass Documentation for additional references and examples.

Syntax

Sass includes two syntax options:

  • SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax.
  • Indented (simply called 'Sass'): Uses .sass file extension and uses indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write.

Note: Files can be converted from one syntax to the other using the sass-convert command.

Variables

Just like other programming language, Sass allows the use of variables which can store information you can use throughout your stylesheet. For example, you can store a color value in a variable at the top of the file, and then use this variable when setting the color of your elements. This allows you to quickly change your colors without having to modify each line.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

The following CSS will be produced:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting

Nesting is a double-edged sword. While it provides an excellent method for reducing the amount of code you need to write, it can also lead to over-qualified CSS if not done carefully. The idea behind nesting is that – when done properly – it will let you nest your CSS selectors in such a was as to mimic your HTML hierarchy.

The following shows a basic navigation style that uses nesting:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

The CSS output is as follows:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

Partials are smaller Sass files that can be imported (see next section) into other Sass files. Think of partials as code snippets. With these code snippets, your CSS can now be modular and easier to maintain. A partial is designated as such by naming it with a leading underscore: _partial.scss .

Import

Used with Partials (see previous section), the @import directive allows you to import your partial files into the current file building one single CSS file. Be mindful of how many imports you're using as this generates an HTTP request for each one.

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
// basefile.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

And the corresponding CSS output:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Note: When importing partials, you don't need to include the file extension nor the underscore.

Mixins

One of the advantages of using preprocessors is their ability to take complex, long-winded code and simplify it. This is where mixins come in handy! For example, if you have a need to include the vendor prefixes, use a mixin instead – take a look at this example for border-radius :

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Notice the @mixin directive at the top. It's been given the name border-radius and uses a variable named $radius , as its parameter. This variable is used to set the radius value for each element. Later, the @include directive is called, along with the mixin name, border-radius , and a parameter, 10px : .box { @include border-radius(10px); } .

The following CSS is produced:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Are you starting to see the power of Sass?

Extend/Inheritance

The @extend directive has been called one of the most powerful features of Sass. After seeing it in action, it's no secret why.

The idea here is that with this directive, you won't have to include multiple class names on your HTML elements and can keep your code DRY. That's right! You're selectors can inherit the styles of other selectors, and then be easily 'extending' when required.

Now that's powerful.

Operators

Having the ability to perform calculations in your CSS allows you to do more, like convert pixel values into percentages. You'll have access to standard math functions like addition, subtraction, multiplication, and division. Of course, these functions can be combined to create complex calculations.

In addition, Sass includes a few built-in functions to help manipulate numbers. Functions like percentage() , floor() and round() to name a few.

Conclusion

As you can see, Sass is a great way to quickly create and organize your CSS. If you're a web designer, I encourage you to take a look at their official website where you can review the examples shown here, as well as discover a lot more.

ABOUT THE AUTHOR

Tammy Coron is an iOS developer, backend developer, web developer, writer, and illustrator. She blogs at Just Write Code.

Topics

CSS