Less is Way More

Cascading Style Sheets (CSS) are so named because they cascade. If I define a style (say h1) and later define a more specific style (h1 .underline) the later style inherits all of the properties of the former. If I make all h1 tags red my h1 .underline tags will also be red, unless I change it by overriding it. To clarify, let’s see that in code:

h1{
    color: red;
}
h1 .underlined{ /* inherits red from h1 */
    text-decoration: underline;
}
h1 .not_red{
    color: blue; /* overrode inherited color */
}

An aside: How to post source code on WordPress.com

{LESS}Designers make pretty websites by cascading sequences of these styles together to create a whole look. At the professional level these cascades can get quite long (hundreds or thousands of lines of code). At this length it gets hard to see how cascades relate. It’s no surprise that professionals look for ways to reasonably manage them. One method for creating great CSS designs without getting lost in a sea of code is LESS (or its cousin SASS). Think of LESS as CSS+. Instead of flat CSS, LESS allows you to nest selectors making the flat hierarchy of regular CSS into a more intuitive visual structure. Let’s rewrite the code before in LESS:

h1{
    color: red;
    .underlined{
        text-decoration: underline;
    }
    .not_red{
        color: blue;
    }
}

That may not look like it makes things much clearer but when your style sheet gets long it can make it a million times easier to find and change particular styles.

But wait! There’s more… LESS also includes variables and mixins. Variables1 allow you to define a value once and use it over and over again. Need to change that color later? In regular CSS you have to find every use and change them, in LESS you can just tweak the variable. Mixins are like variables on steroids. They allow you to include a style in another style not as inheritance but by actually just putting all of the properties into the style. This provides a great way to take the pain out of working with styles like box-shadow that still require vendor prefixes (example). Didn’t follow that? It translates as “LESS is awesome.”

LESS has one downside: it needs to be compiled. That is, you can’t just link LESS the way you can CSS. Instead, you must first convert LESS to CSS by compiling it. There are fussy methods like command line tools or javascript includes that you can use put you’ll save yourself a lot of trouble by using LESS.app (OS X) or SimpLESS (Windows, Mac, Linux) to track and compile your LESS files. Just point the app at the .LESS file and it’ll automatically create a new .CSS file every time you save. Upload the CSS file to the server and link it like normal.

The sites we will design in this class are likely well within the realm of hand coded traditional CSS. Still, if a project requires a little more power or is likely to need to be updated down the line, then using LESS is an invaluable way to make complicated styles easier to read and change. There are more examples and full documentation on the site and I encourage you to at least check it out.

1. For those who don’t find variables “self-explanatory”, a variable is a name that represents a value that can be changed. E.g. @blue-color: #5B83AD; where @blue-color is the name and #5B83AD is the value.

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s