CODEWITHSUNDEEP
csslesssass
Vojtěch
Vojtěch

Reputation: 12436

Ampersand in Less.js vs. SCSS

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?

Upvotes: 3

Views: 2893

Answers (2)

Daniel
Daniel

Reputation: 905

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

Upvotes: 4

thirtydot
thirtydot

Reputation: 228232

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

Upvotes: 2

Related Questions