Filter by Thinker: View All

What is SASS? Matt Smiley

Lately we've been working a lot with a CSS preprocessor called SASS (Syntactically Awesome Style Sheets). If you are familiar with writing CSS, SASS should look very familiar. You can write rules exactly the same way you might if you were writing a traditional CSS file, but with the added bonus of more flexibility, more organization, and less repetition. At the end of the day working with SASS you still end up with a regular CSS file, SASS just provides an extra layer between writing your styles and outputting a CSS file that gives you a lot of options that are not normally available in regular CSS.

One useful organizational feature of SASS is the ability to split a CSS file up into several smaller CSS files, each containing styles for only a specific element or group of elements on the site. Within these smaller files CSS can be nested into chunks that are very specific. Gone are the days of starting 30 rules with an ID to make sure they only apply to the element you are trying to work with. Now you can make one reference to the ID, and write all of the applicable styles within the ID. When SASS processes your code, the final CSS file will add the ID to each of the classes for you.

Instead of looking through a 3000 line CSS file looking for the navigation styles I can go straight to the navigation SASS file (which is maybe only 150 lines of code) and find the specific rule I need to edit quickly and easily.

Another great feature built into the preprocessor is variables. Variables give us the ability to change entire groups of elements that normally might take hundreds of rule changes within a standard CSS document by changing one line of code in a setup file. Our basic setup file generally consists of three types of content, and is really the only file that is unlike a normal CSS file:

  • References to all of the broken-out smaller CSS files (in the order we intend to load them)
  • Variables I may need to use over and over again within those files (hex colors, font names, etc. These are generally used for anything that will be used in many places.)
  • Mixins. Mixins are chunks of rules that need to apply to many elements.

Want to change the typeface used everywhere on the site? All you have to do is change the variable. In regular CSS this would be a much larger operation since that font name is specifically set in tens or possibly hundreds of places scattered throughout the CSS file.

Using those same cross-browser box-shadow rules on 15 different elements? Make it a mixin and save yourself from copying and pasting the same code 15 times. Now you need to change the shadow? Change the mixin and all 15 elements are instantly restyled with the new shadows! This is especially useful for keeping to the DRY ("Don't Repeat Yourself") principle of writing code.

Another fun thing SASS allows you to introduce into your CSS is math! Normally CSS can't handle math, but with SASS I can say "I want to use this same color, but make it 10% lighter" and the preprocessor will figure out what that color would be and output it as a regular hex color in the final CSS without me ever having to open Photoshop or another tool to figure it out. Pretty neat little trick if you ask me. Want that pixel width to be a percentage? Insert some simple math and get the output as a percentage!

There is so much you can do with SASS it would take me days to get to it all. Thinking about it honestly; I could never get to it all, the limit with SASS is your own creativity. And that is another great reason to start playing with SASS; once you get up and running SASS brings creativity back to what for some has become 'the boring old stylesheet'. We've been able to use it to come up with some creative solutions to otherwise BIG hurdles in development, and if you give it a try, too, I can assure you you will find your own use-cases where SASS can save the day.

What I've discussed here is just a few of the very basic features that got me to switch. At the end of the day SASS is nothing more than a tool to make writing CSS more flexible and to make it more easy to maintain. "CSS with superpowers" is how Sass-Lang.com describes it. After using it for a year now, this is the best description I've seen for it.

A lot of this stuff is easier to understand in code, digging in hands-on is the best way to learn. This short Lynda.com tutorial is a good primer explaining some of these things I discuss here and much, much more:

 

Filed under: SASS , CSS , development

 

Spotlight on Innovation Earns SARE.org Top ACE Award Matt Smiley

We're super happy to announce that the efforts we've put in with our friends at Sustainable Agriculture Research & Education over the past couple years are being recognized by the Association for Communications Excellence in Agriculture, Natural Resources, and Life and Human Sciences (ACE). The suite of sites received a Gold Award for website design as well as the Outstanding Professional Skill award for the entire information technology category.

SARE Nationwide Homepage

At the crux of this project was bringing together what used to be 5 websites into one organized, user-friendly, intuitive structure. Due to the large amount of varying data contained across the sites, powerful search functions were built in to provide users a better way of researching information. Over 5,000 SARE-funded projects are now searchable from their site, making what used to be a daunting task an incredibly simple, quick experience. The site also hosts a myriad of free resources including books, bulletins, and videos.

Read the full story on SARE's website here.

Filed under: SARE , Agriculture , Web Development