This is a continuation of Getting Started with Sass (Part 1).

In Part 1, we covered what Sass can do for you and how to set it up, followed by some showcases on its functionalities. In Part 2, we’ll be taking a look at more of Sass’s functions. So without further ado.

What can Sass do?

Mixins

Throughout your site, a mixin lets you make sets of CSS declarations that you want to reuse. A good use of a mixin is for vendor prefixes and it is like a function in programming language.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.box { @include border-radius(10px); }

/*will produce*/
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance

Using @extend lets you share a set of CSS properties from one selector to another.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}
/*will produce*/
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators

Just like you can with other programming languages, you can even do math processes with Sass.

.container { width: 100%; }
article[role="main"] {
  float: left;
   width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

/*will produce*/
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Tips

1. Maximum nesting: three levels deep, if you’re deeper than that, you’re writing a crappy selector. Crappy in that it’s too reliant on HTML structure (fragile), overly specific (too powerful), and not very reusable (not useful). It’s also on the edge of being difficult to understand.

   .box {
     .box-inner {
       li {
         /* stahp! */
       }
      }
   }

2. Break into as many small files as makes sense. Do it as much as feels good to the project. It easier to jump to small specific files and navigate through them than fewer/larger ones.
3. In deployment, compile compressed. Live websites should only ever have compressed CSS. And gzipped with far-our expires headers to boot.
4. Don’t even commit .css files. The compilation happens during deployment. So the only thing you see in the repo are your nicely formatted hand authored Sass files. This makes the diffs useful as well. A diff is a comparison view of what changed provided by version control providers. The diff for a compressed CSS file is useless.
5. Variablize all colors. Except white and black. Chances are a color isn’t one-off, and even if you think it is, once it’s in a variable you might see uses for it elsewhere. Variations on that color can often be handled by the Sass color functions like lighten() and darken() – which make updating colors easier (change in one place, whole color scheme updates).

Wrapping it up

So this concludes our two part series on ‘Getting Started with Sass‘, we hope this summarized review has shown you the wonders of Sass and what you can expect from it. If you have any questions or comments, please drop us a response at the comments section down below. Thanks for reading!