如何在 SASS mixin 中使用 !default？答案

【问题标题】：How to use !default in a SASS mixin?如何在 SASS mixin 中使用 !default？
【发布时间】：2018-02-12 19:25:53
【问题描述】：

我有这个 SASS 混合：

@mixin micro-clearfix
    &:after,
    &:before
        content: ""
        display: table
    &:after
        clear: both
    * html &
        height: 1% !default
    *+html &
        min-height: 1% !default

不幸的是，它无法编译，除非我删除 !default，这将是拥有这个 mixin 的重点。

我得到的错误信息是：

Invalid CSS after "1% ": expected expression (e.g. 1px, bold), was "!default")

我想要实现的是，如果已经为选择器定义了 height（或 min-height），那么 mixin 应该使用该值，否则它应该将此属性定义为 1%。

我不想使用zoom，因为那不是一个有效的属性，我希望保持我的 CSS 干净。

我是不是用错了!default？

我有 Compass 0.12.1 和 SASS 3.1.10。

【问题讨论】：

!default 用于 Sass 变量声明，而不是 CSS 属性。

标签： css sass compass-sass

【解决方案1】：

!default 仅在声明变量时使用：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_

你要做的事情应该用CSS !important declaration来完成，它应该用在mixin之外的规则中（你想要占上风的那个）。无论如何，使用!important 通常不是一个好习惯。也许你可以依靠级联或特异性。

【讨论】：

感谢您的回复，但正如您所提到的，使用!important 通常是不可取的，所以我不能接受您的回答，除了我自己找到了解决方案。

【解决方案2】：

这是我最终的做法：

@mixin micro-clearfix
    $minHeight: 1% !default
    &:after,
    &:before
        content: ""
        display: table
    &:after
        clear: both
    * html &
        height: $minHeight
    *+html &
        min-height: $minHeight

【讨论】：

为什么不将$minHeight 传入你的mixin 并设置为@mixin micro-clearfix($minHeight: 1%) 之类的默认值？