Ampersand in Less.js vs. SCSS

Question

I was about to switch from SCSS to Less.js, but I cannot find one functionality that I have used to use with SCSS.

#nav {
  li a {
    color: maroon;

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

Here he says that he defines what will have a gray background #nav li a

in the context body.admin

.

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

Compliant #nav>li {...}

.

Is this not possible with less.js?

+3

Vojtěch 06 Mar At 13:29

2 answers

Yes, this is a use and is supported in LESS .

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

LESS Login:

#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;
}

+4

Daniel 08 june 13 at 19:58

thirtydot · Accepted Answer · 2012-03-09T14:03:56+0000

I don't think you can do a body.admin &

thing with LESS. Probably not bad 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 click "Run")

It is so simple:

.A {
    > .B {
        width: 50px;
    }
}