WebAppers

/ best free open source web resources /

Shopify

Less – An Extension to CSS

Posted · Category: Code

Less

Less is Leaner css. Less extends css by adding: variables, mixins, operations and nested rules. Less uses existing css syntax. This means you can migrate your current .css files to .less in seconds and there is virtually no learning curve.

Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.

Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

Operations
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to do create complex relationships between properties.

Requirements: Ruby on Rails
Demo: http://lesscss.org/
License: Apache License

11 Comments
  • Ron van de Graaf

    Nice… but it’s there is something better than this. Module HAML and SASS (in combination with Compass) for Ruby on Rails.

  • http://www.projectmayhem.co.nz Rick

    All of this is stuff I’ve wanted in CSS3 for a long time. Too bad there’s not a PHP port.

  • Ben

    @Rick Just wait for it mate…

  • Ben

    @Ron van de Graaf : any link please ?

  • pops

    Great idea… i’ll be waiting for a php version

  • http://www.julabs.com/ resun

    Good idea,i want a Python version:)

  • awake

    just wondering if there is a php version already out there

  • http://fedmich.com/life fedmich

    Good idea.

    but until there’s no PHP port yet.
    we’re stuck with compressing css.

    my fav is http://www.csscompressor.com

  • http://www.facebook.com/benoitvilliere Ben

    I would like to contact the creators of less, Alexis Sellier and Dmitry Fadeyev, but there’s apparently no way on the Less website. Hopefully they’ll come up here and try to reach me?

  • http://twitter.com/cloudhead Alexis

    Ben: sent you a message on twitter.
    And by the way, I built Less because I wasn’t satisfied with SASS.

  • Sid

    I like LESS better than SASS because of LESS syntax that is basically just extending plain CSS syntax.

    At the moment, I’m trying out LESS with Blueprint on a small Symfony Framework project.

    Rather than the following typical blueprint div:

    I like the LESS approach of:

    Where the LESS file looks like:

    @import “blueprint/screen.css”;
    .sidebar {
    .span-4;
    .last;
    /* other sidebar properties */
    }

    Cleaner, more semantic, and ability to reuse classes from a CSS library/framework.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons