Syntactically AWESOME Stylesheets: An Intro to Sass

Sass logoAs a web designer, you may have come across design blogs, tutorials, and job listings that mention Sass. And you may have left it in the pile of web-dev jargon to look into later. But Sass is not a technology that you want to miss.

Sass (Syntactically Awesome StyleSheets) is a CSS preprocessor, a tool made to advance your CSS styling making your code easier to read and easier to edit, plus add a world of powerful features. (There are actually several CSS preprocessors out there. Two other popular ones are Less and Stylus.)

CSS preprocessors have arisen to popularity in the last decade as some web developers have become frustrated with the limitations of CSS. Sass was first released in 2007. It was developed from another language, Ruby, but uses the same syntax as regular CSS. Sass’s .scss files compile into .css for delivery. Let’s check out some capabilities of Sass’s syntax.

Features

Variables

With variables, you can set a value like a color or font and refer to it when needed. Then if you need to change the value, you only have to change it once, and your whole document is set.

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

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

Nesting

Sass allows you to nest your CSS selectors, just like HTML.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Inheritance via @Extend

Sass’s @extend feature allows you reference the CSS properties of a previous selector and apply them to following selectors.

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

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

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

Mixins

Mixins allow you to re-use chunks of CSS that you find yourself using often. You can even include variables to make them more flexible. Mixins are especially useful when dealing with vendor prefixes.

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

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

Benefits

As you can see, Sass provides a way for some incredibly powerful features to benefit your website production. It provides a simpler syntax that is much easier to read and write. Sass can also help boost your website’s performance (if done right) with cleaner code, wider browser compatibility, and faster load times. Also, Sass improves your workflow, helping you develop more efficiently.

Drawbacks

There are some drawbacks to using Sass and CSS preprocessors alike. Just like any other language, Sass can be abused, bloating your code and complicating your workflow (See some problems in this critical article). It is a syntax with its own best-use standards to be mastered and bug-fixed. It is important to realize that these tools should never be a substitute for good architecture. In fact, experienced developers recommend that you get comfortable with CSS before diving into preprocessors.

Also, Sass is somewhat mutually exclusive, meaning you can’t work on the same stylesheets with another coder who writes in traditional .css files. (But of course, Sass works magically if your whole team uses it in the workflow.)

Resources

To learn more about Sass, you can visit the website sass-lang.com. Or you can watch video tutorials by  LevelUpTuts on YouTube, or by paid tutorial websites like Lynda.com or Drupalize.me.

Sass and pre-processors may not be for everybody. Many professionals are using Sass or other CSS preprocessors to optimize their project workflow. While CSS may obtain similar features as preprocessors in the future (but not too soon), Sass and CSS Preprocessors can boost your workflow, so I definitely recommend trying it out.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s