A Sassy Way to Clean Up CSS

stewart-curryWhen a consultant finds efficiency, it’s just another feather in his cap. When a web developer finds it, it heralds the end of a giant pain in the ass.

And so it was with Stewart Curry, this month’s speaker at Refresh Dublin (@RefreshDublin).

Introducing the web development tool, Sass, Curry (@irishstu) described his role for the evening as giving “a brief introduction to sassy CSS and why it’s awesome.”

Co-founder of start-up woop.ie and organizer of Refresh Dublin, Curry called Sass a powerful tool. “You write a lot less CSS,” he said. “‘What I like about it is that if you are prototyping or testing it allows you to make changes really quickly.”

Although it was more technical than all of the other Refresh Dublin talks I have attended, at its heart was a concept even the most un-techie could understand: efficiency.

Web design has changed a lot over the last 15 years, Curry noted. It has become more a more complex activity both technically and in terms of satisfying stakeholders’ needs. The mobile revolution, meanwhile, has radically altered how the web is accessed.

One of the key developments during the evolution of the web was the introduction of Cascading Style Sheets (CSS). This was a huge step forwards because it allowed web developers to separate their page content from their presentation, and a giant leap for productivity and maintainability.

(Curry’s talk featured many code examples. His slides can be found here.)

Basically Sass (Syntactically Awesome Stylesheets) introduces many programming concepts to the generation of style sheets. This includes looping, mathematical functions and variables. It also goes a step further by drawing on Object Oriented Programming to introduce the concept of inheritance.

One example of Sass’ power would be when branding guidelines are issued by a company’s marketing gurus. These can get quite specific and detail fonts and colors for written material for example.

But HTML, the mark-up language for making web pages, has six different heading tags. If each of these has colors or fonts or, worse yet, sizes relative to body text, a simple change can become complex very quickly.

But, as Curry explained, Sass allows the developer to use variable to handle all those changes in one place. Adding to its power, is Sass’ ability to manipulate those variables mathematically. So if body text must be a certain percentage size of the heading, this can be handled easily in the same location.

So just as CSS’s initial implementation centralized style, Sass works a little harder to further whittle down the amount of locations the same stuff can be found.

Unlike CSS, which can be manipulated in raw form in a text editor, Sass is run through a compiler before a style sheet is generated.

Additional resources:

Image of Stewart nabbed off the Refresh Dublin website.