When writing CSS for large sites and/or redesigns, does it ever feel like your duplicating style after style? The one thing about CSS that really gets me down sometimes, is the duplication of effort.
For instance, you set a color in your stylesheet via a hexidecimal value and after about 20 minutes you realize you need to reuse that color for another id/class. Since you are using several hex values, its hard to remember which is which so now you have to go back and dig through the stylesheet to find the one you want.
Enter LESS, a leaner CSS. Taken directly from their site “Less extends css by adding: variables, mixins, operations and nested rules.” Now you’re probably thinking, “Huh? CSS doesn’t have variables…does it?”. Well, no it doesn’t, but LESS does.
You see, instead of writing traditional CSS, you write LESS code. It uses the traditional CSS syntax, but changes the rules. I’ve taken some of the LESS.org given examples and provided them below.
Variables
Using our previous color example from the beginning, you can set your hex value to variable. This allows you to forget about the hex code value and also helps if you ever want to update the value with a new color. You’re able to do so in a single location. Check it out:
/* CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
/* LESS */
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
Now I don’t know about you, but this alone made me fall in love with LESS. But what about the dreaded lack of nesting within CSS? You specify styles for an heading and then decide to make it a link. Well, now you have to account for styling the #header the #header a. Once again, LESS makes this a bit easier to type:
/* CSS */
#header {
color: red;
}
#header a {
font-weight: bold;
text-decoration: none;
}
/* LESS */
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
If you weren’t sold previously, surely you are now. And the best thing is, there’s even more available options to shorten the amount of CSS you have to write. I’ll leave those for the LESS.org website to explain though.
If you have any other cool web tools you’d like to share, please do!
Special thanks to Matt Lewis for sharing this with me!
