DON'T READ this Less CSS Tutorial (Highly Addictive)
WARNING: If you like copy-pasting, find-replacing, scrolling in giant messy CSS files, not reusing your code, writing hundreds of times the same thing, you should definitely LEAVE THIS PAGE RIGHT NOW. I'm serious, if you start reading this tutorial, you might like it and could dangerously become way more productive. At the end of this read, you might even think crazy things like "pure CSS sucks" ! You've been warned...EDIT: I strongly recommend reading or watching my talk about CSS Preprocessors and consider using Sass instead of Less. If you're a web developer or designer you probably faced this kind of situation before: "I wonder if we should use a different theme on our website, can we try a blue one instead of the current green?" 2 possible answers:
- A pure CSS developer: "Damn... Can you come back in 15 minutes?"
- A Less CSS developer: "Sure! Wait just a second... Done, look!"
What is Less?
- On the fly in the browser with
- By using the lessc compiler via the command-line,
- With some fancy app like CodeKit or LiveReload.
Compiling in the browser with less.jsLessCSS.org has a big tempting button to download
less.js. It is not a good idea. At least not for production.
less.jsis perfectly fine!
Lessc and the command-lineYou can also execute Less in your terminal. In order to do this, you will need to install Node.js on your development machine, and then install the Less module by running:
npm install less -g
lessc style.less > style.css
Using an application to compile for youHere is a list of applications that you can run when you are working that will manage the compilation for you. It is taken from my slides about CSS Preprocessors: Some of these apps are free, others are paid. I've personally tried Codekit on Mac, which costs $25 and works really well.
Okay sounds cool, let's start!In this entire scenario, my goal will be to draw CSS shapes with different colors and decorations (cause it's visual and I know you like it). Of course you can, and should, imagine how you can apply this to a real project. I highly recommend that you implement this example for real, because it's the best way to learn. Honestly, you should really do it. I know you're lazy but trust me, it's worth it. So create an empty HTML file and here we go!
Our HTML fileFirst, here is the HTML we'll be using:
A little bit of basic CSS stylingOkay, we can finally start! First, create and open a
style.lessfile. Then we add some CSS styles to our shapes in order to see them. We'll set the default shape to a simple light blue square: Run
lessc style.less > style.cssto compile it and this is what your browser should display: Nothing surprising here, just pure and simple CSS for the moment. But what if our example gets mucher bigger and we declared the
#ddflight blue color in several different places in the file? Even with very good CSS best practices, we would still have to replace every single declaration of this color in order to try a new theme for example. That's not convenient at all. Let's use a Less variable to handle this.
VariablesLess variables can be declared and used with the
@symbol. You give them a name and a value, and then you can refer to the name of the variable anywhere in your Less file: Pretty cool right? But it won't be very helpful if we have to change the references to
@lightBlueeverywhere in the code. So we can for instance declare an other variable for our "default theme": With this example you can see our code becoming more modular and reusable. We just have to change the
@lightGreento apply the new green theme: You can see a Less best practice here as well: declaring all the dumb constants at the top of the file, and then adding some logic.Talking about constants, be aware that Less "variables" are actually just constants, and their value cannot be changed once they're set. So like Indiana Jones, "choose wisely"!
Personal tip: I like to use the usual camelCase notation (lowercase for the first word, then uppercase for the first letter of the following words) for variables. You could also use the CSS-style naming convention with dashes-between-lowercase-words, it's up to you. It personally helps me to differentiate Less from pure CSS.
MixinsDo you know how to draw rounds in CSS? You just have to set a very high CSS3 border-radius value. Let's apply that to the first shape: Since we used CSS3, if we want it to work for as many browsers as possible, we must provide the alternative
-moz-vendor prefixes versions as well. So you would do something like this is regular CSS: We see something interesting here: three properties with the same value. Pretty boring to write right? No problem, Less to the rescue! With Less we can define "mixins", which are something comparable to functions in other programming languages. In Less they're used to group CSS instructions. We'll use a mixin to handle the boring repetition of border-radius declarations. Just like variables, you have to declare a mixin before calling it, with the
.symbol this time: You can then apply this
.Roundmixin wherever you want to make something round without having to declare the
border-radiusinstructions again. That's already cool, but it gets even cooler with parameters.
Personal best practice: You probably noticed that I used a capitalized letter for the mixin name. Well since CSS class selectors also use the
. symbol, there is no way to differentiate it from a Less mixin name. That's why I always use capitalized letters. That also mimics Object Oriented Programming, which uses capitalized letters for classes.
Parametric mixinsI now want to be able to create rounded squares, not just rounds. Let's modify our
.Roundmixin to something more generic:
RoundedShapemixin should be able to handle rounds and rounded squares, depending on the parameters used to call it. To declare parameters, use parentheses after the mixin name: A parameter can be used similarly to a variable inside the mixin, and you can specify a default value for the parameter if none is given when the mixin is called. I also used a variable for this default value to keep the code reusable and generic. So now that we have our cool RoundedShape mixin, let's create 2 other mixins which will call it to create rounds and rounded squares: And then, all we have to do to is applying those
RoundedSquareto our shapes: Now refresh your page and... BOOM! Since we haven't passed any parameter to
RoundedSquare, the 30px
@defaultRadiusvariable is used, but we could also call it with parameters, on
#shape3for instance: With just 3 lines to call our mixins, we have a whole logic handling behind the scene that makes our code super reusable and easily maintainable. How cool is that? We can go way further with mixins. In my opinion, variables and mixins are so powerful that it's a sufficient reason to move to Less! But since Less offers tons of other amazing features, let's take a look at it.
OperationsOne other powerful feature of Less is the ability to use mathematical operations in your stylesheets (I agree it sounds boring, but it's actually very cool). Let's declare a
@defaultShapesWidthvariable to set the default shapes widths to
200pxinstead of hard-coding it like we used to:
@borderSize:@defaultShapesWidth * 0.1;
#000has no effect and
#fffhas a maximal effect. And this is what we get when applying these new variables to a border rule:
border:@borderSize solid @borderColor;
Side note: Remember that all this funky Less code will be converted to CSS in the end, so this will be static once generated. If you programmatically resize the width of a shape, the border won't scale with it on the fly.
Color functionsLess provides the following color functions:
lighten(), which add some black or white,
desaturate(), to make a color more "colorful" or more "grayscale",
fadeout(), to increase or reduce transparency,
spin(), which modifies the hue of the color.
@borderColor:darken(desaturate(@defaultThemeColor, 100%), 20%);
Nested rulesWhen designing a complex page using CSS, you often have to chain selectors to aim a particular element in the DOM, like this: Depending on the container of the
h1elements, their style will be different if they're in the
#mainsection. This syntax is fine when you have a very simple DOM, but if you have to chain 4 or 5 selectors it gets messy and visually hard to represent the hierarchy of your styles. With Less you can nest rules inside parent rules to mimic the DOM structure: This can be a little bit confusing at the beginning but when you get used to it, this syntax helps a lot to visualise where is located the element you're working on. There is also a super handy way to use pseudo-classes (you know, those special selectors like
:hover). Let's say we want to change our shapes' color when hovering them with the mouse, we can use nested rules combined with the
&symbol represents the current selected elements. It's the equivalent of "
this" in most programming languages. Very convenient! And here is the result: Nested rules are pretty awesome, but there is a little drawback: since we use CSS syntax highlighting for our
*.lessfiles, many editors (including Eclipse) will go crazy and do some very bad syntax coloration with nested rules. If you can deal with broken syntax highlighting it will be fine, but for most of us, it's really awful. The only thing we can do is wait for a proper plugin to bring a real Less support to our editors. Personally, I only use nested rules for very simple one level nesting with few properties or for the
&:hoverthing. But it's really up to you.
ImportingFinally, the last thing I wanted to show you is how to import Less files. It's a very good practice to separate your rules into different files instead of having a 1000 lines giant file. Importing a file into another in Less is as simple as that:
- CSS Reset or normalization,
- Fonts and typography,
- UI Elements,
- The main styles of the page,
- ...and any other relevant group of rules depending on your project.
Final Less codeHere is what the final code looks like (no import for such a little example): You will also notice that you can use single line comments, which is a very simple but clever addition to CSS!
ConclusionWe've seen a lot of amazing features in this tutorial, and I hope it made you want to start using Less. I personally think Less is a real game changer for web development, and I cannot even consider going back to pure CSS. Less is like CSS5 in 2011! There are still very interesting things I haven't covered in this tutorial so if you're interested in learning more about Less, you should definitely check the official documentation. Oh and by the way, since Less is also open source and hosted on Github you can easily get involved, report issues, or fork it. That's all folks! Thanks for reading and feel free to share your thoughts and previous experience about Less in the comments section. I'd love to know if you enjoy it as much as I do!