Learning LESS: An Introduction

Apr 24, 2012
CSS
426 Shares
By

Today, I’m proud to start a series of posts that will focus on LESS, the dynamic language that takes your CSS and puts it on steroids. LESS let’s you use variables, mixins, nested rules, and even functions within your CSS. It’s extremely powerful and can dramatically speed up your development. There is a little bit of a learning curve to it, but once you wrap your head around it, you won’t type CSS again without using LESS.

Blog Series Roadmap

  1. An Introduction
  2. Using Variables
  3. Using Mixins
  4. Using Nested Rules
  5. Using Functions
  6. Divide and Conquer
  7. Put It Into Action

So with that laid you, you’ve got a lot of great stuff to look forward to. Let’s get started on our introduction to LESS.

What Is LESS and Why Should I Care?

In my dealings on the web, I have found that there are three types of people when it comes to dealing with LESS (or any other CSS preprocessor). There are the I’ve never heard of it people, the Yeah, I’ve tried it, but it’s not for me, and the Yup! I love it people.

My goal after this blog series is to make you fit into that last category.

According to Wikipedia, LESS is:

a dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax.

LESS has been around since 2009 and has really ramped up in the past few months, getting widespread use by projects large and small, including Bootstrap, from Twitter, the most popular project on GitHub.

As we progress through this series, you’ll get a better grasp on what LESS really is, and what it can be used for, but in short, it allows you to create a powerful library of variables, quick CSS3 effects, and much more.

What Resources Are Out There?

There are plenty of places you can read up about LESS, but you might as well make your first stop the source, http://lesscss.org, the home base of LESS. They will help guide you through setup, some intro to the code, steps to process your LESS files, and much more.

Smashing Magazine also posted a intro to LESS and how it compares to SASS, which is another popular CSS preprocessor.

A simple Google search on LESS will bring up a lot of other tools, tips, and tricks, but nothing is better than getting your hands dirty in actual code and learning from the ground up.

Is This Server Side or Client Side?

Good question, and the answer to that is it can be both. Or neither.

To implement LESS using a client side method, save all of your files as type.less and incorporate them into your document just like you would a CSS file.

<link rel="stylesheet/less" type="text/css" href="type.less">

Once you’ve got all of your LESS files loaded up, it’s time to call the LESS JS file which compiles all of your LESS files to one CSS stylesheet.

<script src="less.js" type="text/javascript"></script>

And that’s it for client side! Be sure that you call the less.js file after you include your .less stylesheets.

Unfortunately, I won’t go in to details on how to set up LESS on the server side simply because I don’t work with server side much, and I wouldn’t want to lead you astray. Instead, I’ll go in depth on the third method, which I highly recommend. Do neither client or server side.

Using LESS.app for Mac OS X

One of the most powerful clients that I use when coding in LESS is the LESS.app for Mac OS X (Sorry, Microsoft users – although give SimpLESS a try). The LESS.app compiles your LESS files into a CSS stylesheet in development, and even gives you the option to minify your CSS to save file size. This makes creating styles extremely powerful, because you can utilize dozens of LESS files, compile them to one stylesheet, minify it and publish to your server.

To use LESS.app, simply drag your development folder to the app window and LESS.app will automatically find all of your LESS files. You can then specify which ones you want to convert to CSS, where to save them (in your development folder) and whether or not to minify the CSS.

Pretty cool stuff, that’s for sure.

So take a few minutes out of your day today and in the coming days to check out LESS, the LESS.app, and some of the other resources out there.

Coming up next in the blog series, Learning LESS: Using Variables. See you next time.

Author: Alex Ball
Alex has been working in web design and development for over five years, and loves learning and expanding his skill set. A fan of CSS3 and HTML5, he also enjoys going old school with HTML (table) Emails.
  • Syed Sumair Zafar

    Nice initiative….I would love to follow this thread to learn about Less

    • http://twitter.com/AlexBall12 Alex Ball

      Syed – Glad you like it so far. A lot more in depth LESS to follow!

  • http://twitter.com/azzcatdesign Catherine Azzarello

    I’m a long time user of LESS and @bdkjones’ LESS.app. If you like LESS.app, I highly recommend it’s new big brother: CodeKit–all the goodness of LESS.app + lots more, including image optimization.

    • middle8media

      I am about to buy CodeKit. So it’s the tool to have huh?

    • http://mustified.com/ Mustified

      Any alternative of CodeKit for PC users???

  • http://twitter.com/LucaRosaldi Luca Rosaldi

    LESS.app and SimpLESS are fine, but if you’re looking for something more than a compiler, CodeKit is the best. Period.

    • middle8media

      Yeah, it looks that way. Fav features?

  • http://twitter.com/AlexBall12 Alex Ball

    Good points from Luca and Catherine on CodeKit – I’ve only used the demo, but it is important to keep in mind that there is a cost attached to it, whereas LESS.app is free.

    While not expensive, if you’ve got the $20 to grab CodeKit, definitely go for it. Definitely more in depth and robust.

  • John Walker

    If you want to use LESS with .net take a look at http://www.dotlesscss.org/ available via nuget

  • shivabeach

    Dont forget you can use the LESS Parser and then send the parsed CSS file up instead of using the LESS js file which is another call. You can write the less file, parse it on the desktop and bingo your set to go with a css file

  • Cythux

    I like it and i hope after the Less Serie, it’s come a serie for sass/scss or oocss

  • http://edwardcaissie.com/ Edward Caissie

    LESS is going into my next project … I’ll be looking forward to reading this series of posts.

  • http://www.avinashdsouza.me Avinash D’Souza

    Alex, could you throw some light upon WHY you think the third method of implementing LESS is the best/one you recommend?

    • http://twitter.com/AlexBall12 Alex Ball

      Absolutely. So, like I mentioned in the article, I don’t so much on the server side, so I guess I can’t really speak to that method, but comparied to a client side implementation, you’re taking a lot of server calls out of the picture by using the third method.

      Every script and LESS file you include, the users browser has to ping the server, grab the file, download it, then the less.js file has to parse them all together, all of which takes time.

      If you do it locally on your computer (using LESS.app or CodeKit), you can do all of that on your computer, and only upload on CSS file (which you’d normally do anyways).

      Basically takes it from being 10-20 requests to being 1 request, thus speeding up loading time!

  • middle8media

    When is the next post in this series?

    • jeff_DD

      It will be live tomorrow. Each week we will have a new post in this series going live so keep checking back!

      • middle8media

        Great. I will keep reading and checking back. Good job.

  • http://www.cyberworldsolutions.org/ Cw Solution2012

    Nice blog here thanks fro shearing!

  • http://www.msalogodesign.com/ Business Logo Design

    Superb article, great job, awesome blog, thanks a lot!

  • Luke Pavel

    Hi, brilliant post on LESS love it! But I’m seem to be have difficulty making it work with my site and I’m not sure why. I’m using Taco HTML to create the site but can’t seem to be able to get the LESS to work no matter what I do. Would someone be able to give me a short how to tut on LESS? thanks.

    • jeff_DD

      Hi Luke, actually we are up to part three in the series. Keep following along to learn more about LESS. We have received some great comments about this tut so far so I am sure you will learn alot from it.

  • Jonathan M. Hethey

    Hello, could you please make the list of entries links? At least for the ones already posted? I think it’s a great series and would like to feature it!

  • Diego Vieira

    There are no links for the rest of the topics like in the other posts.
    Thanks!

  • Bryan

    I can not get this to work for anything! What am I doing wrong? I just want to test it and I can’t get anywhere.
    I create my less file and make the header text “color:red”. Then I add the style.less and less.js to the head tag of the test HTML page.
    Then I add a Hello World The text should be red, but it it not.

    Can anyone, please…..please clear this up for me?

    Thank you!