Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
22 Jun

Less – An Extension to CSS

  • Code
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Create a MS Excel Style Spreadsheet with jQuery.sheet

Create a MS Excel Style Spreadsheet with jQuery.sheet

WebPutty – A Simple and Powerful CSS Editor

WebPutty – A Simple and Powerful CSS Editor

The Best Cheat Sheets for Web Developers

The Best Cheat Sheets for Web Developers

JS.Class Makes JavaScript Behave Like Ruby

JS.Class Makes JavaScript Behave Like Ruby

WinJS: Using the Windows Store Library for JavaScript

WinJS: Using the Windows Store Library for JavaScript

Protovis – Visualization Toolkit for Javascript using Canvas

Protovis – Visualization Toolkit for Javascript using Canvas

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.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • The Most Well-Made, Free & Open Source Fonts
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Make FullScreen Page Transitions with CSS
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework214
  • Hosting13
  • Information238
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free738
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA