Does Your Web Project Need Sass?

If you’re into Web design, you might run across the term Sass (and its derivative, SCSS) — and if you’re not familiar with them, you might wonder exactly what this neat acronym stands for.

Sass, or “Syntactically Awesome Stylesheets,” is a preprocessor — it applies a certain syntax to CSS or Cascading Style Sheets, the universal Web design style-setter that’s been so popular in upgrading Web design principles from yesterday’s strictly HTML world.

CSS allows for better implementation of backgrounds, fonts, headings, sidebars and all different sorts of elements of a Web page. It’s a relatively new idea, having come on the scene around the mid-’90s. Since then, CSS has been adopted by the World Wide Web Consortium, and it has become a common skill set for designers.

By contrast, Sass only dates back to about 2007. In many ways, you could say that Sass works “on top of” CSS. By providing a different syntax, it can help break down those aspects of CSS that can be confusing to those who have to work with it. Just like many of those conventions for using “white space” in application source code, using Sass can encourage better readability and transparency in that innately puzzling briar patch of code you often get when you pull up the available source code for a Web page.

Developer Input

So what do developers love most about Sass?

For some, it’s the organizational aspect of using a syntax that’s easier to put into various categories. Dan Croak, who works at Thoughtbot in San Francisco, pointed us toward this article by Mike Borsare that talks about how to use Sass in a certain environment, in this case, in moving from Chrome DevTools to a text editor and back.

Using a feature called Sass source maps, says Borsare, can “bridge the divide” between CSS and Sass. Using the source maps, and setting up a workspace in DevTools, can make it easier to make direct edits that, in his words, “persist” to the source code.

Laurence Bradford is an independent developer and Web designer in Lehigh Valley, PA, who also uses Sass to save time writing styles and to keep projects more organized. Bradford uses the syntax for projects like a WordPress blog called learntocodewith.me.

Some of what’s most valuable about Sass, says Bradford, is variables and mixins. Sass variables are used in place of repeated commands to define properties throughout a document; mixins arrange multiple properties into “chunks” of code that can define a control object. (Learn more about Sass mixins here.)

Other developers like the versatility of Sass.

Dylan Husted has built a new way to get people involved in the issue of climate change. His project, a site called SaveOhno.org, makes activism into a visual game, with icons and prompts that require a good deal of visual Web design and layout, all to support the idea that we really should be doing something about preserving the environment for future generations.

In discussing the project, Husted says that using nesting styles techniques in Sass allows the CSS result to “flow from element to element” much better. Husted also points out the power to make styles within classes — instead of just making a style inherent to a certain class, he says, developers can create micro-classes or subclasses, where only certain types of instances take on those desirable style traits.

Zach Feldman works at the New York Code + Design Academy and integrates content on Sass into courses like Front End 101 and Web Development. With variables and partials, he says, Sass allows for a more modular code base.

The Front End and the Back End

Like other types of helpful Web design tools, from Dreamweaver and other sophisticated HTML editors to changing conventions for HTML syntax, Sass doesn’t necessarily make Web pages look better. It just changes the ways that developers work.

“It’s not that the front-end result of using SCSS is going to be better than the front-end result of using CSS,” says Husted, “it’s that the process of getting there will be more organized, easier to understand for a third-party, and easier to do for the developer.”

However, there is a certain logic that says making changes on the back end is going to allow people to code better and make better projects. You could say that a developer, given equal time constraints, might be able to do more with a better set of tools and easier syntax than he or she would with the clunky HTML and primitive integrated scripting of 10 years ago.

One thing’s for sure — all of this Web design power has allowed today’s developer community to create really impressive and inspiring styles that, like the old building front fa?ades of the wild West, can make enterprises and agencies look even better than they really are. For many of those on the frontlines of these ambitious projects, having Sass in hand is a real time saver, and a great part of their virtual toolbox.