Listen, we need to talk. As a web developer, you’re probably still using vanilla CSS (Cascading Style Sheets), the primordial styler of markup since the world wide web came into existence. Sure, CSS has changed a lot in the last decade, but it’s still redundant and difficult to translate between developers. Be honest, when was the last time you looked at someone else’s CSS style sheet and said, “Oh, yeah. That’s exactly how I would have done that.”

New practices like Object Oriented CSS and SMACSS are standardizing the decrepit language. But unfortunately, there are still problems with CSS—it’s still a pain to read, write, or make changes. Worst of all, it makes communication and collaboration a real struggle. Wouldn’t it be great if there was a way to make CSS more like a programming language instead of a markup language? One that facilitates natural communication and collaboration? There is a way. It’s called Sass.

Syntactically Awesome Stylesheets

What is Sass?

You’ve probably heard of Sass, or Syntactically Awesome Stylesheets. It’s a preprocessor to CSS, which means it takes standardized Sass code, puts it through a compiler, and generates semantic CSS that browsers can read. You get all the features of CSS, yet your end users can’t tell the difference.
Sass introduces several key features that make it such a powerful upgrade to CSS. Features like variables, mixins, conditionals, and nesting. This post isn’t going to teach you everything about Sass, but you can learn the basics here.

Why Sass Will Change Your Life

Sass introduces a series of great tricks that make it easier for you to write CSS. It also allows teams to collaborate on projects in a brand new way. Nesting, variables, and mixins are all capable of bringing standardization to projects that vanilla CSS could never do.

For example, you need to update a blog feed that one of your fellow developers built last week. When you open their Sass file you find colors described as words like $brand-blue, $warning-red, $alert-yellow, and you realize, “I know exactly how this site should look without ever seeing the front end.” That is a moment of pure magic. You just read another developer’s style sheet and you didn’t have to pound your head against your desk.

Abstracting CSS into variables means updates are easy as changing one line. By assigning colors and dimensions to variables and whole sets of styles to mixins, making changes becomes as simple as changing the definition. No need to find+replace. It also opens the door for things like personal frameworks and reusable styles, which translates to having more free time. Everyone could use a little more free time.

And if those reasons aren’t enough, abstracting CSS also helps when it comes time to build new features or make changes. Sass brings a new implicit communication between those writing styles and those reading them. That is to say, Sass makes it easier to communicate with other developers.

Developers are Collaborating

Why are things like WordPress, Rails, and Sublime Text so great? Because there are a ton of developers out there who are developing amazing things for them. Have a problem? Chances are someone has built a WordPress plugin or Ruby GEM for it. With all it’s support, Sass enters into that dimension of perpetual remixes, where everyone builds on great ideas and you reap the rewards.

Compass is one of those great ideas. It’s a library of prewritten styles that will help save you time. Things like vendor prefixes, CSS elements, gradients, etc. You include the mixin and it does the hard part. Imagine never thinking about how webkit’s syntax differs from moz again? And because Compass is so widely used, there are solid plugins built with it in mind, like Susy Grid and Color Schemer. As a developer, tools are important, followed by having a community. Sass has both.

Sass is the Future

The future is here. Sass is one of the fundamental ground shifts that rarely occur and swell into a ubiquitous part of building websites. By abstracting CSS into variables and mixins, we can open a new level of communication with other developers as well as ourselves. Join the already thriving community of developers and designers and start using Sass.

Want to learn more?

Check out these sites with more great information on how to bring Sass to your next web development project:

• CSS-Tricks: http://css-tricks.com
• CSS TV: http://css.tv
• The Sass Way: http://thesassway.com