Question

我有这个SASS mixin：

@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。

Answer 1

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

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

Answer 2

以下是我最终的表现：

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

怎么用！在SASS mixin中默认？

2 个答案: