jQuery Plugins Categories

Animation Carousel Chart & Graph CSS3 Date & Time Drag & Drop Effects Form Elements Gallery Grid & Layout HTML5 Maps Media Menu Mobile Modal & Overlay Responsive Scroll Slider Social Table Tabs Text & String Tooltip Zoom Other

Learning LESS: The dynamic stylesheet language

LESS, the dynamic stylesheet language is a new paradigm in CSS. Here we’re going to start a series of articles that will focus on LESS, the dynamic language that will improve your CSS skills. Actually LESS extends CSS with dynamic behaviors, such as variables, mixins, operations and 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. LESS runs on both the server-side  or client-side.

Learn LESS

LESS Articles Details:

1. Introduction to LESS
2. Working with Variables
3. Working with Mixins
4. Working with Nested Rules

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

What Is LESS?

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 article series, you’ll get a better command 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.

LESS Resources?

There are many resource places you can read and start about LESS. But first got to the http://lesscss.org official resource of LESS. They will guide you through intro to the code, setup, steps to process your LESS files, and much more. You can also make Google search on LESS that will surely bring up a lot of other tools, tips, and tricks about LESS, but nothing is better than getting your hands dirty in actual code and learning from the ground up.

LESS is Server Side or Client Side?

LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

Client Side usage:

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

Also link your .less stylesheets with the rel set to stylesheet/less.

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

Once you’ve done all of your LESS files loaded up, Now 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 LESS implimentation! Make sure that you include your stylesheets LESS files before the script.

Server-side usage:

The easiest way to install LESS on the server, is via npm, the node package manager, as so:

$ npm install -g less

Command-line usage:

Once installed, you can invoke the compiler from the command-line, as such:

$ lessc styles.less

This will output the compiled CSS to stdout, you may then redirect it to a file of your choice:

$ lessc styles.less > styles.css

To output minified CSS, simply pass the -x option. If you would like more involved minification, the YUI CSS Compressor is also available with the –yui-compress option.

So take a time out of your day today to check out LESS and some of the other resources out there.

Coming up next in the LESS article series, Learning LESS: Working with Variables. See you next time.



Related posts:

By admin

Robert is a web designer and online marketing expert with over 18 years of experience. Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

  • GeorgeYoder

    Great article. Looking forward to your next article and the entire series. I try to use LESS in all my design work.

  • Middle Media

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

  • Alen

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

  • Tim

    When is the next post in this series?

    • Laeeq

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

  • Ajeet

    Very nice and helpful tutorial. Ty and keep up!

  • masihur

    great job!

  • George

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

  • David

    I heard a lot about LESS but I never got the chance to read about. Thanks for the introduction, looks like a must have! 🙂

  • parvez

    gr8 less tutorial!

  • Ryan

    useful LESS tuttorial!

  • googd article!!!

  • Wow, amazing blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is excellent, as well as the content!

  • Pingback: Useful Tools to Convert LESS into CSS | Web Revisions()

  • Pingback: Top Reasons to Use Bootstrap Framework | Web Revisions()