css - 我可以使用 SASS 有条件地覆盖 CSS 规则吗？

Question

假设我想定义一个 mixin，仅当它尚未设置为时才将display属性设置为.inline-block block

这是一个假设的例子（我意识到这unless部分不是有效的 SASS；这就是我要问的）：

@mixin padded
  padding: $default-padding-y $default-padding-x
  display: inline-block unless(block)

这可能吗？

Answer 1

下面是我处理这种情况的方法： 利用 CSS 属性的顺序很重要这一事实。因此，在您的 mixin 中，将 display 定义为 inline-block；在你的元素中调用它；然后在该调用下方将显示设置为阻塞，覆盖mixin。

@mixin padded
  padding: $default-padding-y $default-padding-x
  display: inline-block

.element
  @include padded
  display: block

出于这个原因，我通常在规则集的顶部调用 mixins（或扩展）。

或者，如果您想动态添加 inline-block 样式，您可以使用 JavaScript 查看元素具有的显示属性，然后相应地应用新类。这不需要 Sass 混合。