7

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

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

混音？CodeKit 配置？

4

2 回答 2

11

更新：是的，LESS 可以提供帮助

我讨厌!important在最极端的情况下使用。大多数人在应该使用手术刀来完成这项工作时，会像使用电锯一样使用它。尽管如此，我了解像您这样的小部件开发人员所面临的问题，并且您选择使用https://github.com/premasagar/cleanslate让您别无选择。

Marc 的回答指出了 LESS 的一个很好的特性，但他未能证明这对这件事有什么帮助。

如果你将整个 LESS 代码包装在一个命名空间的 mixin 中，那么这个特性正是需要的。所以假设你的小部件代码看起来像这样（你提到你已经为你的小部件使用了某种类型的类）：

.yourWidgetClass div > p {
  prop: something;
  &:hover {
    prop: some-hover-style;
  }
}

.yourWidgetClass .someClass {
  prop: something;
}

然后你可以这样做（包装你所有的小部件代码，然后使用Marc 的回答中提到#makeImportant()的功能调用该 mixin ）：!important

#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;
}

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

于 2013-01-08T19:09:25.840 回答
2

我发现 LESS 可以像在 mix-in 调用之后!important指定时一样一次性标记 mixin 设置的所有属性。!important

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

  .someUsages {
    .someMixin() !important;
  }

结果是：

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

有关此主题的更多信息，请参阅有关“ !important 关键字”的 LESS 文档。

于 2014-03-12T14:17:06.757 回答