Ampersand in Less.js vs. SCSS

Question

I was about to switch from SCSS to Less.js, but I can't find one functionality which I was used to use with SCSS.

#nav {
  li a {
    color: maroon;

    body.admin & {background-color: #eee;}
  }
}

Here it says that defines that #nav li a in context of body.admin will have a gray background.

#nav {
  &>li {
     ...
  }
}

Correspond to #nav>li {...}.

These are not possible with less.js?

I don't think you can do the `body.admin &` thing with LESS. Probably not a bad thing, because it's confusing. For `>`, see: http://stackoverflow.com/a/7635074/405015 — thirtydot, Mar 06 '12 at 14:02

score 4 · Answer 1 · answered Jun 08 '13 at 19:58

Yes, this usage of & is supported in LESS.

You can see this if you enter your example into http://less2css.org:

LESS Input:

#nav {
  li a {
    color: maroon;

    body.admin & {background-color: #eee;}
  }
}

CSS Output:

#nav li a {
  color: maroon;
}
body.admin #nav li a {
  background-color: #eee;
}

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

I don't think you can do the body.admin & thing with LESS. Probably not a bad thing, because it's confusing.

For > (child selector), see: Less.js - strong nested rules?

See: http://tinkerbin.com/H3wUpFMj (change the CSS format to "Less", then press "Run")

It's as simple as this:
.A {
    > .B {
        width: 50px;
    }
}

edited May 23 '17 at 12:06

Community

1
1

answered Mar 09 '12 at 14:03

thirtydot

224,678
48
389
349

Ampersand in Less.js vs. SCSS

2 Answers2