A little over a year ago, Tom introduced us to a piece of JavaScript that really can streamline your CSS and make it more dynamic.
At the time, it hadn’t been officially released and was only available from the GitHub. It has since been released and may be the perfect thing to begin implementing into your projects.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
Take a look:
LESS
Here is a basic example of how LESS transforms your CSS:
[cc lang=”css”].box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @val;
-webkit-box-shadow: @val;
-moz-box-shadow: @val;
}
.box { @base: #f938ab;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0, 0, 5px, 0.4) }
}[/cc]
Nice, right?
I want this.
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.
Without LESS
[cc lang=”css”]#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}[/cc]
With LESS
[cc lang=”css”]@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}[/cc]
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, as seen in the example bellow.
Without LESS
[cc lang=”css”]#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}[/cc]
With LESS
[cc lang=”css”].rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}[/cc]
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.
Without LESS
[cc lang=”css”]#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;
}[/cc]
With LESS
[cc lang=”css”]#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}[/cc]
Functions & Operations
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
Without LESS
[cc lang=”css”]#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}[/cc]
With LESS
[cc lang=”css”]@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}[/cc]
Conclusion
LESS gives you more.
More options, more power.
LESS will make your development process easier from start to finish. During the early stages of layout design, perhaps before your color pallete is nailed down, you could define your colors as primary, secondary and highlight? I’m just thinking of this off the top of my head here, folks. You get the idea. You can lay down and tweak your color scheme later, or even in the middle of the project. Easy.
LESS. I dig it.
Learn more and download it from the LESS website.
[HT: Jared Erickson]
Brian Notess says
Nice overview, Eric. It seems like less has a more user-friendly presentation than SASS. Have you tried both? I tend to use LESS more since the desktop app makes it really quick to set up on projects.
Allan W. says
Just used SASS on a project, and totally loved it. Relying on mixins & variables really speeds up changes. I like how the output can be optimized, too.
Only downside (apart from setup & learning curve) that I see is that it’s compiled. I work from several machines, it can get confusing (git helps).
Haven’t compared directly w. LESS, it seems very similar. SCSS is a little more CSS-like than SASS’s indention format.
Eric Dye says
Thanks for throwing-down the knowledge, Allan!
Eric Dye says
I have not dug into SASS. That would be a good question for, Tom. Sounds like you should write a tutorial on setting up projects with LESS. 😉
Andre' Barnes says
I just started using LESS with Twitter’s Bootstrap and it really makes things so much easier. Thanks for posting this Eric.
Eric Dye says
SWEET! 😀