Learning LESS: Setup + Variables
LESS is a programmable CSS language which combines the mechanics of variables, functions and operators all into a fully compliant and accessible stylesheet. If you’ve built a site from scratch, or just modified templates on platforms such as WordPress, Drupal or Magento, you’ll have come into contact with CSS files.
The problem with these files is that common values are littered throughout the file making management of them difficult; for example you might have a certain hex colour for the page’s background that is also duplicated across to the link and border colours in the footer etc. This is likely to be hard coded around the CSS files as dozens of individual hex values. Now your client has come along and asked to change that colour, so you’re left with searching for and modifying those values. Wouldn’t it be easier to to change that value in just one place?
Sticking to the colour theme, wouldn’t it be easier if you could take the backgrounds colour and tweak it slightly to make an elements border that tiny bit darker, to give it some visual punch? I can only speak for myself here, but I suck at crunching hex values in my head. Wouldn’t it be much more accurate and quicker if you could just tell the CSS file to make it 5% darker?
…these CSS problems are solved with LESS!
LESS is a rather powerful tool for CSS development. Or perhaps its a tool that simply shows how limited CSS is to developers. Some argue that programming and logic should be kept out of CSS files, that somehow this bridging of the gap is unthinkable, but to those people… simply don’t use LESS.
In future articles we’ll cover such things as Mixins, nesting and functions, but we’ll start off with setting it all up and declaring some variables.
How to setup LESS
The LESS system works by running your LESS coded stylesheet through a quick client-side JavaScript parser and compiler, returning a normal CSS documents that the browser will then apply to your elements.
Download LESS from their site here.
To enable all this CSS wizardry in your project, include the following within your <head> tags. Obviously changing the paths/filenames to suit your project.
[html]<link href="myStyles.less" rel="stylesheet/less" type="text/css" />
<script type="text/javascript" src="less.js"></script> [/html]
Its important to do the following three things:
- Include your LESS stylesheet immediately before you call the Less JavaScript file,
- Specify that your stylesheet is of the type “stylesheet/less“,
- Include both lines in the HEAD of your HTML document,
That’s it! Simple huh? Now edit your LESS stylesheet in the same manner as modifying a normal CSS stylesheet. All valid CSS is valid LESS code, so you’re not wasting time re-learning anything you already know.
Using Variables in LESS
So finally we get around to doing some coding in LESS. First things first, one of the most basic things in LESS is also one of the most important, that is variable usage.
[css]img {
border: 1px solid #0000FF;
}
img:hover {
border-color: #FF0000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
} [/css]
Here we have some very basic CSS, essentially making things blue until you hover over them, where they’ll turn blue. Nice and simple example.
In LESS you’d use variables like this:
[css]
@normalColor: #0000FF;
@hoverColor: #FF0000;
img {
border: 1px solid @normalColor;
}
img:hover {
border-color: @hoverColor;
}
a {
color: @normalColor;
text-decoration: none;
}
a:hover {
color: @hoverColor;
text-decoration: underline;
} [/css]
Although in this example its taking up a little bit more space, the code becomes considerably more managable as it scales.
To simply change the colours of the site we only need to change their definitions at the top.
It’s not just hex values you can use variables for though.
[css]
@normalFont: "Verdana";
@specialFont: "Ubuntu";
@normalSize: 12px;
@headingSize: 20px;
@paragraphAlignment: "justified";
body {
font-family: @normalFont;
font-size: @normalSize;
}
a.special {
font-family: @specialFont;
}
h1,h2,h3,h4 {
font-family: @specialFont;
font-size: @headingSize;
}
p {
text-align: @paragraphAlignment;
}
[/css]
Here we have font names, alignments and sizes all being defined in variables. This also enables up to modify the entire site by just tweaking the values at the top of our stylesheet.
At the moment, variable declarations aren’t probably going to make you change the way you work on projects, but in the next week or two we’ll talk about LESS’ operators and functions that really bring this tool into the game-changing arena.
Have a question about setting up LESS, or using variables within it? Drop me a comment below and I’ll get back to you ASAP.
Give this article a like or share, or drop me a comment below. Its great hearing feedback from you guys.