LESS CSS语法对于现代化的modernizr很有用。

Question

通常我使用modernizr来查找浏览器的能力。与此同时，我使用LESS CSS使我的CSS更易读和易于维护。使用LESS嵌套规则的常见样式如下：

#header {
  color: black;

  .logo {
    width: 300px;
    color: rgba(255,255,255,.6);
    &:hover { text-decoration: none }
  }
}

那么，如果我使用modernizr style fall-back，我会为以前的块添加这个文本：

.no-js #header,
.no-rgba #header {
  .logo {
    color: white;
  }
}

看起来我有两个代码分支，每次需要检查另一个兼容性方面时，分支的数量将会增加。这种代码难以维护，因为你必须找到应用于每个元素的所有样式，并且使用嵌套类所获得的好处也会消失。

问题是：在LESS语法中是否有一种方法可以包含这样的回退，并且不为.no-js和其他.no-smth类启动新的代码分支？

- Bardt

Answer 1

您现在可以使用 & 操作符来解决这个问题。以下语法应该适用于 less.js、lessphp 和 dotless：

b {
  a & {
    color: red;
  }
}

这将被编译为：

a b { color:red; }

因此，对于给定的示例，您可以使用以下语法：

#header {
    .logo { color:white; }
    .no-rgba &,
    .no-js & {
        .logo { color:green; }
    }
}

...这将被编译为：

#header .logo {
    color:white;
}
.no-rgba #header .logo,
.no-js #header .logo {
    color:green;
}

- Ben

---

这似乎是主要的LESS项目以及PHP版本 https://github.com/cloudhead/less.js/issues/127 中的内容。 - Chao

太好了！我就知道这一定存在 :-) 我试着搜索“跳出less选择器”、“从less选择器中逃脱”或“在less选择器中引用根”，但最终我意识到“modernizr less”会找到这个 :-) - Simon_Weaver

@Simon_Weaver 我也是这样发现的! - drskullster

Answer 2

我认为最好的方法是为这些回退设置一个单独的.less文件。我认为这样做会更容易管理，因此您不必在许多地方寻找.no-rgba。

.no-rgba {
  #header {}
  #footer {}
}

.no-js {
  #header {}
  #footer {}
}

我尝试按照你想要的方式提出解决方案，但是我没有成功。

- Bill Criswell

---

这次我觉得这是最佳的方法。我应该在下个项目中尝试一下。如果你发现了更好的方法，请告诉我一声。谢谢你的尝试！ - Bardt