我正在构建一个将在客户端站点上显示的小部件.我们不能使用iFrame,因此我不得不使用详尽的CSS重置(https://
github.com/premasagar/cleanslate)来避免干扰他们的样式.要使用该解决方案,我需要为我的所有样式添加！important,因为它们有很多并且我希望保持这些代码易于维护,我正在寻找更动态的解决方案.
我可以通过javascript向样式表添加！important,但这对于生产环境来说并不理想.我正在使用CodeKit和LESS,并想知道这些中的任何一个是否能够帮助我轻松添加！对于生成CSS文件时所有样式都很重要.
混入？
CodeKit配置？
解决方法
更新：是的,LESS可以提供帮助
除了在最极端的情况下,我讨厌使用！重要.当他们应该使用scalpal来完成这项工作时,大多数人会像电锯一样使用它.尽管如此,我理解像您这样的小部件开发人员面临的问题,并且您选择使用https://github.com/premasagar/cleanslate会让您无法选择.
Marc’s answer注意到LESS的一个很好的特点,但是他没有证明这对这件事有什么帮助.
如果将整个LESS代码包装在命名空间的mixin中,则此功能可以完全满足需要.因此,假设您的小部件代码看起来像这样(您提到您已经在为小部件使用某种类型的类)：
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
然后你可以这样做(将所有小部件代码包装在#makeImportant()中,然后使用Marc的答案中提到的！important特性调用mixin)：
#makeImportant() {
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
}
& {
#makeImportant() !important;
}
这会产生以下CSS输出：
.yourWidgetClass div > p {
prop: something !important;
}
.yourWidgetClass div > p:hover {
prop: some-hover-style !important;
}
.yourWidgetClass .someClass {
prop: something !important;
}
对于我手动密集的原始(已接受)答案,请参阅编辑历史记录.
