Different CSS output between less compilers

Question

For a while, I used to compile my less using Sublime's less2css plugin, but more recently I've started using LiveReload* and I love it.

I noticed a difference between the CSS output depending on the compiler I used.

For the following LESS:

.gallery {
    margin-bottom: 1em;

    img {
        .wide-gallery& {
            width: 49%;

            &:nth-child(odd) {
                margin-right: 2%;
            }
        }
    }
}

LiveReload gave me the output I expected:

.gallery {
  margin-bottom: 1em;
}
.wide-gallery.gallery img {
  width: 49%;
}
.wide-gallery.gallery img:nth-child(odd) {
  margin-right: 2%;
}

...but my less2css plugin in sublime mismatched my selectors:

.gallery {
  margin-bottom: 1em;
}
.wide-gallery .gallery img {
  width: 49%;
}
.wide-gallery .gallery img :nth-child(odd) {
  margin-right: 2%;
}

Are the two compilers just using a different version of less? I'm not sure what's going on here.

*I'm using LiveReload v0.7.1.0 on Windows 8.

If you think my use of the ampersand combinator is confusing this article has more info. — Web_Designer
– Web_Designer, Commented Feb 15, 2013 at 8:20

Daniel Ursu · Accepted Answer · 2013-02-15 08:25:28Z

1

in my case, Crunch! did the job just fine http://crunchapp.net/

answered Feb 15, 2013 at 8:25

Daniel Ursu

4593 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Web_Designer Over a year ago

LiveReload compiled my less correctly too, and refreshes my browser (yes I'm lazy). Could be a bug with less2css? I've tried Crunch before. 'Tis a pretty cool app, but I prefer to do all my dev'ing in one text editor (sublime is awesome).

Collectives™ on Stack Overflow

Different CSS output between less compilers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related