css - 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 做不到这些吗？

Answer 1

是的，&的这个用法是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;
}