less / less.ruby

Less Ruby — now at http://github.com/cowboyd/less.rb

Note: From now on, new development on LESS will be happening in http://github.com/less/less.js

See http://github.com/cowboyd/less.rb for less ruby development.

LESS

It's time CSS was done right – LESS is leaner css.

Setup

to get the latest development version:

sudo gem install less -s http://gemcutter.org

to get the latest stable version:

sudo gem install less

Explained

LESS allows you to write CSS the way (I think) it was meant to, that is: with variables, nested rules and mixins!

Here's some example LESS code:

@dark: #110011;
.outline (@width: 1) { border: (@width * 10px) solid black }

.article {
	a { text-decoration: none }
	p { color: @dark }
	.outline(3);
}

And the CSS output it produces:

.article a { text-decoration: none }
.article p { color: #110011 }
.article { border: 30px solid black }

If you have CSS nightmares, just $ lessc style.less

For more information, see you at http://lesscss.org

People without whom this wouldn't have happened a.k.a Credits

• Dmitry Fadeyev, for pushing me to do this, and designing our awesome website
• August Lilleaas, for initiating the work on the treetop grammar, as well as writing the rails plugin
• Nathan Sobo, for creating treetop
• Jason Garber, for his magical performance optimizations on treetop
• And finally, the people of #ruby-lang for answering all my ruby questions. apeiros, manveru and rue come to mind

less.ruby's Issues

Properitary declarations

This will cause a parse error on 1.0.5

background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));

PS: Can't refer to hex colors (it'll turn into issue links), so I used 'red' and 'blue'. Both fails parsing, though.

If you have two rules, the last one is taken

div {
width: 100px; // this rule is discarded
}

div {
color: red;
}

Multiple selectors in nested rules

#header {
  h1, p {
    margin: 0;
  }
}

Returns #header h1, p, should return #header h1, #header p.

Formatted CSS Output

Have an option to format the CSS output with new lines and indentation, for better readability.

NULL values

Feature request

To clean up property declarations a little, it would be useful to be able to use null values.
Whenever I need to overwrite some, but not all -for example margin- values, by default, it's a bit overcomplicated:

The ordinary method:

.class { margin: 10px 10px 15px 20px; }
.another_class .class { margin-left: auto; margin-right: auto; }

The suggested method:

. class { margin: 10px 10px 15px 20px; }
.another_class .class { margin: null auto; }

So null basically leaves the top and bottom margin intact, but the changes on the left/right will be compiled to:

.another_class .class { margin-left: auto; margin-right: auto; }

In my opinion, this makes the code much shorter (and therefore much readable), so I'd be glad to see something similar to this in a future release.

error parsing attribute selectors without element name

eg.

[disabled] {
    color: #f00;
}

(Another low-priority defect from compiling my legacy codebase. Although some of these are easy to work around, I figure they are worth fixing to minimise friction for people converting css to Less).

Issue with shorthand CSS looking like operations

Ok, had an issue with shorthand CSS when with using negative values. So for example:

margin: -10px 0 10px 0;

That will move the item up 10 pixels by creating a negative margin on top, then add 10 pixel margin below it. I had some code similar to this that caused some problems -- will go back and double check what it was. I think the CSS output was wrong, not an actual error by the compiler. I solved it by separating it out of short hand, so... margin-top: -10px; , but obviously that needs fixing.

LESS cannot parse cyrillic character even in comments

subj.
LESS failed on reading /* */-style comment, that contained some cyrillic characters.

Syntax error if only statement within declaration doesn't end with a semicolon

If I have this:

pre {
  white-space: pre
}

Less crashes with:

on line 35: expected one of { ; got `125` after:

pre {
  white-space: pre

If I put a semicolon after white-space: pre then Less is happy.

This is inconsistent with CSS, which allows a statement to not end in a semicolon if it's the only one in the declaration.

Same thing happens if the last statement within a declaration doesn't end in a semicolon.

rgb broken

It looks like the patch to treat color as a vector broke rgb colors. The problem is that the array isn't flattened properly. Thus, calling rgb(200, 200, 200), actually calls rgba([200, 200, 200], 1.0), creating an invalid number of arguments situation.

It appears none of the existing specs used rgb so it didn't get caught.

I fixed the issue with the following commit. Please let me know if you have any questions.

30e2d8ebca3df18d6c835f953c06503778ba3cfe

using '_' in variable names

Gave me an error when I used '_' in varialbe name, like @some_variable

Don't export some mixins

Love the syntax and ease of use with Less, but i have a small feature request. Some mixins are only used as just mixins for other classes and there is no need for this class being present in the outputted css-file. It would be nice to have the option to specify that a mixin shouldn't be outputted to the final css but just included in other classes. Maybe by using the variable syntax:

@mixin {
  background-color: red;
  
  :hover {
    text-decoration; underline;
  }
}

Syntax error with grouped CSS selectors and line breaks

Description:
The compiler fails when there is a line break between two or more grouped CSS selectors.

I usually tend to add line breaks between more grouped CSS selectors to avoid having really long lines in my files and it is also more readable.

Example:
This works just fine:

a#selector_a, a#selector_b {
/* rules defined here... */
}

However it fails whenever a line break is present between the selectors:

a#selector_a,
a#selector_b {
/* rules defined here... */
}

Output:
$ lessc modules.less modules.css
!! errors were found in the .less file!
line 127: syntax error, unexpected '\n', expecting tASSOC
line 128: syntax error, unexpected tASSOC, expecting $end
"a#selector_b"=>{

Scoping improvements

Currently, variables are searched locally, then globally—ideally we would traverse the scopes, from local to global, until we get a hit. This would allow stuff like this to work:

.foo {
  @var: blue;
  .la {
    color: @var;
  }
}

computations involving multiple variables don’t seem to work

@box_width: 100px;
@border_width: 10px;
div { width: @box_width - 2 * @border_width; }

results in:

div { width: -10px; }

less cannot parse @font-face's format property

Trying to use font-face from CSS3, getting this fail:

~$ cat test.less 
@font-face{
font-family: "DejaVu";
src:url(http://devg.ru/fonts/DejaVuLGCSerif.ttf) format("truetype");
}
~$ lessc test.less 
/var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/function.rb:57:in `to_css': undefined method `to_css' for "truetype":String (NoMethodError)
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/property.rb:115:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/property.rb:114:in `map'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/property.rb:114:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/property.rb:50:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/element.rb:133:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/element.rb:132:in `map'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/element.rb:132:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/element.rb:142:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/element.rb:141:in `map'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine/nodes/element.rb:141:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/engine.rb:43:in `to_css'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/command.rb:56:in `parse'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/../lib/less/command.rb:49:in `run!'
    from /var/lib/gems/1.8/gems/less-1.0.16/bin/lessc:64
    from /var/lib/gems/1.8/bin/lessc:19:in `load'
    from /var/lib/gems/1.8/bin/lessc:19
~$ 

Giving font-height and line-height in the same declaration does not work

body {
font: 12px/16px Tahoma;
}

becomes

body { font: 0px Tahoma; }

Errors due to quotes (syntax error, unexpected tIDENTIFIER, expecting '}')

LESS is currently choking on rules that contain quotation marks, such as this line from Eric Meyer's CSS Reset:

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

Inefficient handling of comma separated selectors

The (commonly used) meyer css reset is a rather extreme example of inefficient output:

The first selector is:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

Which is expanded out when compiled by less:

html {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
div {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
span {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
applet {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
object {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
iframe {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

etc..

The full output is 11k (the original Meyer reset is ~900 bytes).

Inserting too many spaces

This less:

.box#newsletter

Will turn into this css:

.box #newsletter

That space shouldn't be there. That rule is a bit silly, I know, but it should still parse it without adding a space.

CSS parses, Less chokes on a:link

Here's the first two entries in my stylesheet:

@accent_color: #c4161c;

a:link,
a:visited {
    color:@accent_color;
    text-decoration:none;
}

Lessc produces

!! errors were found in the .less file! 
line 3: syntax error, unexpected tSYMBEG, expecting kDO or '{' or '('
a:link,
  ^
!! errors were found in the .less file! 
line 3: syntax error, unexpected tSYMBEG, expecting kDO or '{' or '('
a:link,
  ^

Am I doing something wrong? I feel like I must be. But the CSS is correctly read by the server so I don't know exactly what.

nesting :hover type selectors

Currently, this won't work as expected:
.milk {
:hover { color: white; }
:focus { color: cream; }
}

Compression doesn't work correctly

Compression broke the CSS.

Will need more investigation to narrow down the issue, but have to throw it out here so you know.

error parsing css values with newlines

Less complains about this:

.edit {
    background: transparent url("../img/edit.png") no-repeat scroll 
        left center;
}

It works when the line break is removed:

.edit {
    background: transparent url("../img/edit.png") no-repeat scroll left center;
}

Errors encountered when parsing *.less files

I've just installed less, and thought I'd check everything was working before doing anything serious with it, and I'm getting errors.

The content of the styles.less file is:

header

{
color: black;
.navigation
{
font-size: 12px;
}
.logo
{
width: 300px;
}
}

and the errors output to the console are

!! errors were found in the .less file!
{´╗┐"#header"=>{
^
line 1: syntax error, unexpected tASSOC, expecting $end
{´╗┐"#header"=>{
^
!! errors were found in the .less file!
{´╗┐"#header"=>{
^
line 1: syntax error, unexpected tASSOC, expecting $end
{´╗┐"#header"=>{
^

I'm running Windows Server 2008 on 64-bit Intel if that helps.

less chokes on extended CSS selectors

Less 0.8.10 can't parse the following simple CSS selector (and any selector with brackets inside, I guess):

input[type="text"] { border: 1px solid black }

The error message is the following:

!! errors were found in the .less file!
line 1: odd number list for Hash
{input[type='text']" "=>{ "border"=>"1px solid black",},}
                    ^
line 1: syntax error, unexpected tSTRING_BEG, expecting '}'
{input[type='text']" "=>{ "border"=>"1px solid black",},}
                    ^
line 1: syntax error, unexpected tASSOC, expecting $end
{input[type='text']" "=>{ "border"=>"1px solid black",},}
                        ^

Selector ordering

Property order gets mixed in the output when nested into another selector. The following piece of code demonstrates the issue:

HTML:

<div class="section"></div>
<div class="wide section"></div>

(Less)CSS:

.something {
.section { width: 100px; }
.wide { width: 200px; }
}

The output is:

.something .wide { width: 200px; }
.something .section { width: 100px; }

Since the ordering in the CSS is for good reason, the compiler should retain it.

Can't parse IDs with colons

Apps written using Java's JSF are littered with HTML elements with colons in the ID, eg:

<input type="text" class="text" id="agreementForm:price:priceField1"/>

To select these with CSS you can backslash the colon, like this:

agreementForm\:price\:priceField1 { ... }

... But it doesn't work in IE.
So you have to escape the colon as a hex code:

agreementForm\3a price\3a priceField1 { ... }

This works in all browsers, however Less doesn't recognise this syntax.

Don't output empty selectors by default

div { } etc. can have an option to output them, for debugging purposes.

RGBA not working with transparent value

I encoutered this problem when try to use rgba background color with transparent value:

.trans-black{
background: rgba(0 , 0, 0, 0.5);
}

LESS convert it to hex value, but and wipe out transparent value like this:

.trans-black { background: #000000; }

@import feature

Ability to import style-sheets as well as specific classes & namespaces.

Variable operations in variable declarations.

This will fail on 0.8.13. Dunno if it's still like this in HEAD, the gem is still 0.8.13 tho'.

@main_width: 750px;
@content_width: 600px;
@sidebar_width: @main_width - @content_width;

The calculations in @sidebar_width aren't performed.

color not correctly parsed

When inserting a color like #008584 the result file shows #8584

Pass arguments to mixins?

Example:

@link_color: #50;
.link {
color: @link_color;
border-bottom: 1px dotted @link_color;
}
a {
.link;
outline: none; text-decoration: none;
}
a:hover {
@link_color: #0f0;
.link;
}
a:active {
@link_color: #000;
.link;
}

Perhaps it would still be useful to be able to explicitly parameterize mixins, just for the extra conciseness and clarity:

/* hypothetical code */
a { .link(#80); }
a:hover { .link(#0f0); }
a:active { .link(#000); }

In the hypothetical example, you wouldn’t need to remember which exact variable to set before invoking the mixin .link.

IE hacks

Less doesn't swallow star and underscore hacks, the following fails to compile:

*padding: 0;
_padding: 1px;

Incomplete support for attribute selectors

It seems that this isn't supported yet:

abbr[title] { ... }

http://www.w3.org/TR/css3-selectors/#attribute-selectors

Incorrect colour value expansion

The colour value #f00 is incorrectly expanded to #f00f00 when compiled with less 1.0.6.

#f00 is equivalent to #ff0000.

Less::Engine.new(data).to_css requires a parameter

The docs suggest it doesn't need one. It looks like the underlying Tree class has a default but the Engine class has no default.

syntax error, unexpected tFLOAT, expecting tAMPER (SyntaxError)

I just installed {less} and running lessc test.less I get this error... I can provide the whole error if that helps diagnose the problem... {less} looks totally awesome and I'm bummed I can't even get to try it :(

should using unused variables count as an error?

div { width: @unused; } // passes with flying colors

Should it give an error?

Can't parse ids that start with upper-case letter

lessc can't seem to parse an id that starts with an upper-case letter.

UserLoginForm gives:

: Change detected... ! Syntax Error: on line 3: expected one of * - @ : . [ @media @font-face @import /* // got 35 after:

userLoginForm succeeds.

undefined method `has_terminal?`

when running rake features, we are running into the following error:

undefined method `has_terminal?' for # (NoMethodError)

This is using the latest 1.0.14 version of Less.

Full stack trace:

/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby -I "/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/lib:lib" "/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/cucumber" --format pretty features/manage_invitation.feature
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/command.rb:56: warning: parenthesize argument(s) for future version
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine.rb:18: warning: parenthesize argument(s) for future version
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:497: warning: parenthesize argument(s) for future version
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:592: warning: parenthesize argument(s) for future version
undefined method `has_terminal?' for # (NoMethodError)
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:4041:in `_nt_ws'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:4040:in `loop'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:4040:in `_nt_ws'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:1095:in `_nt_declaration'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:20:in `_nt_primary'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:18:in `loop'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine/parser.rb:18:in `_nt_primary'
/Library/Ruby/Gems/1.8/gems/treetop-1.2.6/lib/treetop/runtime/compiled_parser.rb:18:in `send'
/Library/Ruby/Gems/1.8/gems/treetop-1.2.6/lib/treetop/runtime/compiled_parser.rb:18:in `parse'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine.rb:30:in `parse'
/Library/Ruby/Gems/1.8/gems/less-1.0.14/lib/less/engine.rb:43:in `to_css'
/Users/justinsmestad/Documents/Factory/audi_tdi_challenge/config/initializers/less_for_rails.rb:14:in `run'
/Users/justinsmestad/Documents/Factory/audi_tdi_challenge/config/initializers/less_for_rails.rb:13:in `each'
/Users/justinsmestad/Documents/Factory/audi_tdi_challenge/config/initializers/less_for_rails.rb:13:in `run'
/Users/justinsmestad/Documents/Factory/audi_tdi_challenge/config/initializers/less_for_rails.rb:34
/Library/Ruby/Gems/1.8/gems/activesupport-2.3.3/lib/active_support/dependencies.rb:147:in `load_without_new_constant_marking'
/Library/Ruby/Gems/1.8/gems/activesupport-2.3.3/lib/active_support/dependencies.rb:147:in `load'
/Library/Ruby/Gems/1.8/gems/rails-2.3.3/lib/initializer.rb:622:in `load_application_initializers'
/Library/Ruby/Gems/1.8/gems/rails-2.3.3/lib/initializer.rb:621:in `each'
/Library/Ruby/Gems/1.8/gems/rails-2.3.3/lib/initializer.rb:621:in `load_application_initializers'
/Library/Ruby/Gems/1.8/gems/rails-2.3.3/lib/initializer.rb:176:in `process'
/Library/Ruby/Gems/1.8/gems/rails-2.3.3/lib/initializer.rb:113:in `send'
/Library/Ruby/Gems/1.8/gems/rails-2.3.3/lib/initializer.rb:113:in `run'
/Users/justinsmestad/Documents/Factory/audi_tdi_challenge/config/environment.rb:27
/Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
/Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `polyglot_original_require'
/Library/Ruby/Gems/1.8/gems/polyglot-0.2.6/lib/polyglot.rb:55:in `require'
./features/support/env.rb:2
/Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
/Library/Ruby/Site/1.8/rubygems/custom_require.rb:31:in `polyglot_original_require'
/Library/Ruby/Gems/1.8/gems/polyglot-0.2.6/lib/polyglot.rb:55:in `require'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/../lib/cucumber/cli/main.rb:95:in `require_files'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/../lib/cucumber/cli/main.rb:104:in `each_lib'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/../lib/cucumber/cli/main.rb:102:in `each'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/../lib/cucumber/cli/main.rb:102:in `each_lib'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/../lib/cucumber/cli/main.rb:95:in `require_files'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/../lib/cucumber/cli/main.rb:47:in `execute!'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/../lib/cucumber/cli/main.rb:25:in `execute'
/Library/Ruby/Gems/1.8/gems/cucumber-0.3.11/bin/cucumber:9

Error parsing css values beginning with a dash

eg:
.dinosaurContainer {
display: -moz-inline-stack;
}

I assume it affects any value starting with a dash (-moz-inline-block too)

Order of appearance in 1.8

Since the parser creates a regular ruby hash from the .less, the order of the declarations and rules aren't persisted. This:

h1, h2, h3, p{
    margin:0;
    padding:0;
    margin-bottom:.8em;
}

Turns into this:

h1, h2, h3, p { margin-bottom: 0.8em; margin: 0; padding: 0; }

Which leads to the margin-bottom being overridden by margin: 0;

Same goes for order of appearance of the declarations themselves, as mentioned. You might have rules that overrides other rules, based on order of appearance. Less may or may not break this, depending on the order the items gets in the Ruby hash.

Better evaluation engine

The evaluation engine is somewhat linear, which makes certain complex operations on namespaced variables problematic.
Reordering the operations may help, as well as separating the evaluations for variable definitions from css property declarations.
A better 'evaluate-on-demand' system could be implemented for a > 1.0 version.

Using @media fails

When I do something like:

@media print {
    a { display: none !important; }
}

The compiler fails, thinking @media is an improperly declared variable.

Watching doesn't work when you haven't made a .css yet

So basically, you need to have the .css file compiled before you can run the --watch command, otherwise it gives you an error saying the CSS isnt there. Expected behavior is: if .css isnt there, compile it once and start watching.

background: url(image.png); problem

Error:

syntax error, unexpected ':', expecting '}'
{@image: url(logo.png);

Basically doesn't work when using '(' and ')'

RuntimeError

If the following CSS is written adding an additional definition throws a Ruby error.

div#some_id{
  div#some_other_id{
    color:red;
  }
  div#another_id{
    background: yellow;
  }
}

Instead of showing a wrong CSS or parsing error, the following Ruby error is thrown -

/usr/local/lib/ruby/gems/1.8/gems/less-0.8.13/bin/../lib/less/tree.rb:53:in `each': hash modified during iteration (RuntimeError)
        from /usr/local/lib/ruby/gems/1.8/gems/less-0.8.13/bin/../lib/less/tree.rb:53:in `traverse'
        from /usr/local/lib/ruby/gems/1.8/gems/less-0.8.13/bin/../lib/less/engine.rb:32:in `compile'
        from /usr/local/lib/ruby/gems/1.8/gems/less-0.8.13/bin/../lib/less/engine.rb:130:in `to_css'
        from /usr/local/lib/ruby/gems/1.8/gems/less-0.8.13/bin/../lib/less/command.rb:57:in `compile'
        from /usr/local/lib/ruby/gems/1.8/gems/less-0.8.13/bin/../lib/less/command.rb:50:in `run!'
        from /usr/local/lib/ruby/gems/1.8/gems/less-0.8.13/bin/lessc:72
        from /usr/local/bin/lessc:16:in `load'
        from /usr/local/bin/lessc:16

Full selector syntax

Currently, we can do stuff like this within values:
color: .foo > .bar > @var;
Eventually, we want to be able to do:
color: .foo @var;