我可以使用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中定义显示为inline-block;在你的元素中称呼它;然后在该调用下方将显示设置为阻止，覆盖mixin。

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

.element
  @include padded
  display: block

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

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