By Scott Fegette | Wednesday, June 10, 2015
CSS is the design language of the web, but for many it’s a black art at best. Designers bemoan the inconsistencies, limitations, and quirks of CSS, and developers wring their hands at CSS’ lack of logic, variables, and other constructs that help make code flexible and reusable.
Turns out all you need to solve both problems is a little Sass.
Sass stands for “Syntactically Awesome Style Sheets” and it’s become an incredibly popular way to work with CSS. In this article we’ll take a look at how it helps simplify and extend the CSS workflow for developers and designers alike.
By Ray Villalobos | Friday, July 20, 2012
Getting started on something new can be challenging, especially when the shear number of competing technologies that do similar things can make it tough to choose which one to give your attention to. One of the hot new trends in web design is CSS pre-processed languages and there’s two big ones vying for your attention—LESS and Sass. LESS and Sass are both ways of writing CSS code with a syntax that allows you to use features not yet available with Cascading Style Sheets (CSS), such as variables, nesting, conditionals, and more.
Pre-processed CSS languages add features to CSS that aren’t there yet—like variables, conditionals, and functions. They’re called pre-processed, because their final step is a processing, also called compiling, that converts the pre-processed language to regular CSS. In a nutshell, what you use on your site ends up being plain vanilla CSS, but comes as a result of processing the LESS, Sass, or other pre-processed language files you create.
For example, when you build a large web site, there’s usually a palette of colors you’re using throughout the site, and you might, for instance, be using one color for your article headlines that you also want to use on your links in the bottom navigation.
Example of web site design using the same color for article headlines and bottom navigation links.
Doing that with CSS is pretty easy:
<a href="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png"><img class="aligncenter size-full wp-image-14227" src="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png" alt="CSS code that alters the color text within a web design." width="506" height="55"></a>
While that works well, what if you wanted to use that same color in 20 or 30 selectors, or in gradients with a bunch of different browser prefixes? Both Sass and LESS will allow you to create variables which make global changes on elements a breeze. The code for this color application—with the assigned variable @myColor—looks like this in LESS:
And—with the assigned variable $myColor—like this in Sass:
Looks pretty much like CSS, right? Both LESS and Sass let you use the regular CSS code you already know so you really don’t have to learn a whole new way of doing things—just some additional rules. Even if the only thing you get out of pre-processed CSS is the ability to use variables, that alone will save you a lot of time, and it’s technology that saves you time that you need to spend your time investigating.
The CodeKit compiler.
You can also have CodeKit ‘mini-fy’ all of your files, not just your CSS. That means that it can spit out a different version of your code without comments, tabs, or extra spaces, which will make your files a lot smaller (something I recommend that you be doing regularly anyway).
If you use frameworks like BootStrap or jQuery Mobile, you can import them into your projects through CodeKit from a central location. When a new version of jQuery comes out, you can simply replace one copy and all of your projects will auto-update with the latest copy.
On a PC or Linux machine, things are a bit less rosy. There is a nice LESS compiler called SimpLESS which helps, but it’s not as feature-full as CodeKit.
There are many more things you can do with LESS and Sass. If you’ve been on the fence about them, I recommend you give them a shot. Starting simply with variables is easy enough if you are already familiar with CSS, and if you’re like me, you’ll find using variables will make your life immediately easier. Even if you’re into command-line tools, I recommend you take a look at something like CodeKit or SimpLESS.
Both LESS and Sass are pretty good, especially if you’re just getting started. For me, LESS has a bit of an edge since I’m currently digging into Twitter’s Bootstrap Framework, which makes it a breeze to scaffold and build web sites quickly (it is written in LESS). Sass takes the cake if you’re working with Ruby on Rails projects since it was written in Ruby. Ultimately, which pre-processed language you choose doesn’t really matter since they’re both tools that will make you more efficient, and that’s always worth an investment in time. Pick one and wedge it into the workflow for your next project. It may take you a bit longer to finish, but it will also change the way you code for the better.
Interested in more?
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com
Suggested courses to watch next:• CSS: Core Concepts•CSS Fundamentals•CSS3 First Look•Managing CSS in Dreamweaver
You can change your email preferences at any time. We will never sell your email. More info
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.