Learning LESS: An Introduction

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

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.

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.

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.
More articles by Alex Ball

Syed Sumair Zafar

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

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

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!

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.

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.