Add a Little Sass to Your Code

Published: September 19th, 2013 by Taj V.



sassy-css

Like any good web designer, I know CSS like I know my ABCs. CSS (short for Cascading Style Sheets), along with HTML, is the foundation of so much we do as developers. But I’m here to tell you that there are better ways to code.

Imagine you’re an artist. You’re asked to draw a picture of a sunset, but all you get to work with are some gray paint and a thick, messy brush. You’ll work with what you’ve got—but even if you’re da Vinci, your painting won’t be as good as it could be. To really work your magic, you need better tools (for starters, a few colors would be nice).

This is a little bit like Sass’s relationship to CSS: Sass is a stylesheet syntax that works as an extension of CSS3. It offers a bunch of handy features that make coding faster, cleaner, and more, well, colorful.

Sass first appeared in 2007. It’s short for Syntactically Awesome Stylesheets (seriously), and has two syntaxes:

• Indented syntax. This is the older, rarer Sass syntax. It was inspired by bare-bones coding languages like Haml, and uses line indentation rather than brackets or semicolons to separate blocks. Indented syntax files go by the extension .sass. The problem with this syntax is that it’s not compatible with CSS, and doesn’t look much like it, either. This makes indented syntax tougher for designers to learn and use.

• Sassy CSS (SCSS). This is the most commonly used form of Sass (introduced in Sass 3.0), and uses the file extension .scss. It works like an add-on to CSS3, meaning that every stylesheet that’s valid in CSS3, is valid in SCSS.

Whichever syntax you choose, think of Sass as CSS3 taken to the next level. Those tedious, repetitive features of CSS that you hate? Chances are, using Sass makes them simpler. Sass offers features like:

• Nesting. When you’re writing code for elements with many sub-components, like tables or lists, typing the same selectors over and over can get old fast. Sass helps you avoid this headache by nesting child selectors inside parent selectors. You can also apply nesting to properties of a given selector, like font or border attributes.

• Variables. You can use Sass variables to describe attributes of selectors that you plan to reuse. Variables are called out using the symbol “$.” Let’s say you want all text to show up in a shade of light blue, but don’t want to keep track of the color’s hexadecimal code.

First, write what you want your color variable to represent:

$lightblue: #00CCFF;

Then, apply that variable to your text:

$textcolor: $lightblue;

Variables are lifesavers on big, long-term projects. Rather than committing styles for colors, links, buttons, and tables to memory, write easy-to-remember variables into your code.

• Mixins. Mixins take variables a step further by allowing you to use a single selector to represent a whole section of code (for example, all style elements of a table). You can even add in equations to instruct an element to adjust sizing as needed. Sass also supports conditional states and “for” and “for each” loops. Best of all, mixins are automatically removed from your code when you compile, so they don’t affect file size. Check out Compass for a great library of reusable, open-source mixins.

Intrigued yet? This is just a sampling of what Sass can do. If you’re ready to add some Sass to your code, head here to learn how to install (it’s written in Ruby). And be sure to check out the developers’ complete Sass Reference Guide, which contains everything you need to know to make your stylesheets syntactically awesome.

Upgrading to Sass from CSS3 is like switching from dingy gray paint to a 64-color Crayola box. Once you get the hang of it, you won’t know how you ever did without.

Want to know more about coding with Sass? Atomic’s developers can give you the inside scoop.

 

Leave a Reply

You must be logged in to post a comment.

Atomic Interactive