Less.js与SCSS的＆符号

Question

我准备从SCSS切换到Less.js，但我找不到一个我曾经用过SCSS的功能。

#nav {
  li a {
    color: maroon;

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

这里说明#nav li a的上下文中的body.admin将具有灰色背景。

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

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

less.js无法实现这些目标吗？

Answer 1

是的，这个用法＆amp;是supported in LESS。

如果您将示例输入http://less2css.org：

，则可以看到此信息

少输入：

#nav {
  li a {
    color: maroon;

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

CSS输出：

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

Answer 2

我认为你不能用LESS做body.admin &的事情。可能不是坏事，因为它令人困惑。

对于>（子选择器），请参阅：Less.js - strong nested rules?

  

请参阅： http://tinkerbin.com/H3wUpFMj （将CSS格式更改为“更少”，然后按“运行”）

     

这很简单：

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