If you’ve had a look under-the-hood of WooCommerce or any of our new themes you may have noticed some unusual .less files that accompany our normal .css files. In this post I will explain those files, and introduce the Woo community to a CSS pre-processor which is taking the web design world by storm; LESS CSS.
LESS CSS?
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
LESS is a language much akin to CSS which we all know and love. As the quote above says, it extends CSS in different ways, making it modular, flexible and quicker to write. It’s a perfect partner for CSS3 with it’s vendor prefixes.
It’s important to note that while we’re using LESS to author better CSS, you don’t have to. You can still edit any CSS file as you have in the past. But LESS is such a fantastic tool I would recommend that if you’re into tinkering with our themes that you at least give it a try.
If you can write CSS, you can write LESS. There are however have a couple of options to consider before diving in; particularly whether to compile your LESS files locally via an app or remotely via JavaScript. While it takes a little time to set up I would recommend using a desktop application every time rather than forcing unnecessary bandwidth usage on your server.
So with the boring bit out the way, let’s have a look at the language itself. As I said, if you’re comfortable with CSS then LESS will be very easy to pick up. I’ll echo a few examples from the LESS site to demonstrate some of the ways we use it to improve the CSS in our new themes.
Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}In this example a color is specified as a variable. This can be used throughout your LESS document in any place you want to utilize that color. The above would be compiled thusly:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}The beauty of this is that if you should want to change that color at any point, you simply change the variable in your LESS file and save it to compile the CSS. Obviously this is much quicker than going through the entire document finding and replacing.
Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments.
Mixins are particularly useful given the range of vendor prefixes we find in CSS3. Let’s say you wanted to make a div have rounded corners. In traditional CSS you would apply the following to your class(es):
.rounded {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}This can be extremely tedious, especially when you want round specific corners, or if standards evolve and certain Vendor prefixes are no longer necessary, or more are required. Mixins allow us to specify these rules once, and then call on them throughout the rest of our LESS file. Here’s another example:
.border_radius (@radius: 10px) {
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
-o-border-radius:@radius;
border-radius:@radius;
}
#header {
.border_radius;
}
#footer {
.border_radius(20px);
}This would output the following:
#header {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#footer {
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
}It’s plain to see that even using basic mixins will rapidly increase the speed at which you can write and globally modify your CSS.
Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
My personal favorite LESS feature is nested rules. It’s simple, but once again makes CSS easier to write and easier to read / organise. Let’s look at another example:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}The above would output:
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}Pretty nifty!
These are probably the three simplest features of LESS but they clearly represent what it’s all about and how it can help any project. Hopefully it has been enough to whet your appetite to find out more.
Be sure to discover the rest of it’s features on the
LESS web site before this post turns into a code fest!
First off, we’d like to wish all of our users who celebrate Thanksgiving, a very happy & blessed Thanksgiving.
