通常我使用现代化 http://modernizr.com/了解浏览器的功能。同时,我用LESS CSS http://lesscss.org/使我的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 类启动新的代码分支?
您现在可以使用&
运营商来解决这个问题。以下语法应该适用于less.js https://github.com/cloudhead/less.js/issues/127, lessphp http://leafo.net/lessphp/, and dotless https://github.com/dotless/dotless/commit/468e650cc7f6b184256061480e32cb2e833e4c13:
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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)