Question

我正在构建一个将在客户端网站上显示的小部件。我们不能使用iFrame，因此我不得不使用详尽的CSS重置（https://github.com/premasagar/cleanslate）来避免干扰他们的样式。要使用该解决方案，我需要在所有样式中添加！important，因为有很多样式，我希望保持这些代码易于维护，我正在寻找更动态的解决方案。

我可以通过javascript向样式表添加！important，但这对于生产环境来说并不理想。我正在使用CodeKit和LESS，并想知道其中任何一个是否能够帮助我轻松添加！对于生成CSS文件时所有样式都很重要。

密新？ CodeKit配置？

Answer 1

更新：是，LESS可以帮助

我讨厌使用!important，除非在最极端的情况下。当他们应该使用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;
}

对于我手动密集的原始（已接受）答案，请参阅编辑记录。

Answer 2

我发现LESS可以在混合调用后指定!important时将mixin设置的所有属性一次标记为!important。

  .someMixin() {
    background-color: #fff;
    cursor: pointer;
  }

  .someUsages {
    .someMixin() !important;
  }

结果：

  .someUsages {
    background-color: #fff !important;
    cursor: pointer !important;
  }

有关此主题的更多信息，请参阅关于＆＃34; The !important keyword＆＃34;的无序文档。

添加！对于没有javascript的小部件的所有样式都很重要

2 个答案:

更新：是，LESS可以帮助