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

Question

假设我想定义一个 mixin，将 display 属性设置为 inline-block only if it is not already set to 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 padded
  padding: $default-padding-y $default-padding-x
  display: inline-block

.element
  @include padded
  display: block

正是出于这个原因，我通常在规则集的顶部调用混合(或扩展)。

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