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

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

这是一个假设的例子(我意识到除非部分无效SASS;这就是我所要求的):

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

这可能吗?

最佳答案 以下是我将如何处理这种情况:利用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.

点赞