What to Know About Sass: A Guide for People Who Aren’t Developers

May 9, 2019 By David Zimmerman, aka Zim Zala Bim

There are plenty of posts out there about Sass if you’re a web developer, but what about the people who aren’t developers? This post is for people who work or live with web developers, might want to hire them, or otherwise have an interest in Sass. Here’s what to know about Sass:

What is Sass?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor. You write things in Sass first and it gets compiled into CSS. It’s generally faster to write a bunch of Sass than it is to write the CSS it turns into, which makes Sass a bit like shorthand for CSS.

As the CSS spec itself continues to expand, a lot of the great benefits of Sass are being made redundant. For the sake of this post and focusing on Sass, we’ll ignore places where CSS has or is going to have the same features.

What is CSS?

CSS, or cascading style sheets, is the part of the website code that makes the website look the way it does. Red text? color:#f00; Underlined text? text-decoration: underline;. A box that’s always half the width of the screen? width: 50vw;

CSS is separate from the other two parts that make a webpage, HTML and JavaScript. HTML is the content and semantics, JavaScript is functionality, and CSS is appearance.

Why Use Sass?

Consider a brand new website with all kinds of fonts, colors, buttons, boxes, images, and unique layout elements throughout the site.

Define Things Once

Colors in CSS are defined in specific formats, as either RGB, RGBA, or Hex codes. Having to remember #6c4b11 all the time can be as cumbersome to a developer as it is to anyone else. Remembering $brown is a little bit easier.

This is where Sass’s variables come into play. You can define things once, in one place, and then reference them throughout the rest of your stylesheet. And, it’s not just for colors either – you can specify $padding as 10 pixels and then scale the padding throughout your site by adjusting one variable, a border radius, an opacity, a transition, or whatever suits your need.

More Advanced Features

Sass has a lot of more advanced features for developers, too. For example, Mixins let you define certain default settings or parameters and then act accordingly, like mini style functions. Similar blocks of styles or redundancy can be simplified with a mixin declaration. Extending, inheriting, including, and helpful operators are just some of the other things that make Sass so good.

Manage Styles Quickly and Effectively

Overall, Sass lets you treat your styles in a more modular fashion. It makes it easier to reuse stuff, easier to organize stuff, and lets you manage a website’s styles more quickly and effectively. Using Sass makes a site’s styles easier to maintain, too.

With Sass, changing a color or style on a website can be done by changing a handful of variables in one place rather than having to find and replace multiple declarations across multiple files.

Sass vs CSS with Sandwiches

Think about it this way: You have to give instructions to a cook who is about to make you and your friends a bunch of sandwiches. The longer it takes you to give them the instructions, the longer it takes them to make the sandwiches, and the longer it takes you and your friends to receive the sandwiches.

Would you list out every ingredient and every sandwich individually, repeating the same instructions over and over with slight variations like this?

Nine ham sandwiches with lettuce, tomato, and mayonnaise.
One ham sandwich with lettuce and mayonnaise.
Six turkey sandwiches with lettuce, tomato, and mayonnaise.
Four turkey sandwiches with lettuce, tomato, mayonnaise, and pickles.

Or, would you try to be succinct and brief to get the cook the information they need while also getting your sandwiches faster like this?

20 sandwiches: 10 with ham, 10 with turkey, with lettuce, tomato, and mayo on all, except no tomato on 1 of the ham sandwiches, and add pickles on 4 of the turkey sandwiches.

The first example is CSS and the second one is Sass. This isn’t a perfect metaphor, but hopefully, it gets the point across.

Is Sass a sure thing?

There might be exceptions for really small projects where the overhead involved in using Sass negate the benefits, in which case normal CSS would be the more efficient approach. A good editor will likely have features that provide alternatives that are equally effective, at least on small scales.

In the future, Sass may become obsolete as CSS continues to evolve and many of the features Sass introduces are becoming part of CSS itself. But, for now, Sass offers its own set of benefits in certain circumstances – at least until CSS catches up.

So, if you know a web developer, now you can tell them that you know why they should use Sass. Good job, now get out of here and get some sandwiches with your friends. Consolidate your order before you get there and deliver it to the cook directly, and you’ll be eating in no time!