CSS

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

  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.

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
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress