通常我使用modernizr来查找浏览器功能。同时,我使用LESS CSS使我的CSS更具可读性和可维护性。使用LESS嵌套规则的常见样式如下所示:
#header {
color: black;
.logo {
width: 300px;
color: rgba(255,255,255,.6);
&:hover { text-decoration: none }
}
}
然后,如果我使用modernizr样式后退,我将为前一个块添加此文本:
.no-js #header,
.no-rgba #header {
.logo {
color: white;
}
}
所以,看起来我有两个代码分支,每次我需要检查另一个兼容性方面时,分支的数量会增长。此代码的可维护性较差,因为您必须找到应用于每个元素的所有样式,并且使用嵌套类获得的好处会消失。
问题:在LESS语法中是否有一种方法可以包含这样的回退,而不是为.no-js和其他.no-smth类启动新的代码分支?
答案 0 :(得分:20)
您现在可以使用&
运算符来解决此问题。以下语法适用于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;
}
答案 1 :(得分:1)
我能想到的最佳方法就是为这些回退设置一个单独的.less文件。我认为这最终会更容易管理,所以你不必在很多地方啄.no-rgba
。
.no-rgba {
#header {}
#footer {}
}
.no-js {
#header {}
#footer {}
}
我确实想出一个解决方案你想要它但我没有运气。