Less.js中的&符号与SCSS有何区别？

Question

我本来打算从SCSS转换到Less.js，但是我发现不能像使用SCSS一样使用某个功能。

#nav {
  li a {
    color: maroon;

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

这里定义了在 body.admin 上下文中，#nav li a 会有一个灰色的背景。

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

对应于#nav>li {...}。

这些在less.js中不可能吗？

- Vojtěch

---

我不认为你能在LESS中使用body.admin &这个语法，这可能是件好事，因为它很容易让人感到困惑。关于>的用法，请参见：https://dev59.com/WVvUa4cB1Zd3GeqPxtwQ#7635074 - thirtydot

Answer 1

是的，这种使用 & 在 LESS 中是支持的。

如果您将示例输入到 http://less2css.org 中，您可以看到：

LESS 输入：

#nav {
  li a {
    color: maroon;

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

CSS 输出：

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

- Daniel

Answer 2

我认为你不能使用LESS来完成body.admin &的操作。这可能并不是一件坏事，因为它会让人感到困惑。

关于>（子选择器），请参见：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;
    }
}

- thirtydot