| CARVIEW |
Get LESS
The LESS Ruby gem compiles LESS code to CSS. To install:
$ sudo gem install less
Once installed, you can compile .less files to .css with the following command:
$ lessc style.less
Using Rails? Get the plugin. For more info on installing and using LESS please see the Docs.
Latest Release — 1.2
Dynamic mixins, and improved CSS 3 support.Twitter Buzz
- grobot "the concepts at www.lesscss.org *so* should be in CSS core! great stuff there from @cloudhead"
- kbucek "after being amazed with .sass I switched to .less to have evolutionary instead of revolutionary stylesheets ..."
- riceric "Wow LESS, where have u been all my web designing life? A must see 4 those who have always wanted to do more w/less"
- danhallock "…and your frustrations with CSS will just melt away: https://lesscss.org/"
- markuskoljonen "A gift from Gods to web developers"
- benlilley "The 'Less' Ruby Gem for CSS is pretty awesome. Would love this support in standard CSS."
- elliottcable "seriously, people, LESS is the fucking shit. /cc @cloudhead re https://lesscss.org"
- markrbaird "What CSS should have been from the start: https://lesscss.org/ Simply amazing."
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.
@brand_color: #4D926F; #header { color: @brand_color; } h2 { color: @brand_color; }
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. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
.rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .rounded_corners; } #footer { .rounded_corners(10px); }
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.
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
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.
@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}
Head over to the Docs for information on installing and using LESS.
Ollie the bluebird/Twitterrific © The Iconfactory, used with permission
LESS is open source under the Apache License.