10

我有这个 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错误的方式吗？

我有指南针 0.12.1 和 SASS 3.1.10。

4

2 回答 2

14

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

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

于 2012-04-27T20:36:55.117 回答
8

这是我最终完成的方式：

@mixin micro-clearfix
    $minHeight: 1% !default
    &:after,
    &:before
        content: ""
        display: table
    &:after
        clear: both
    * html &
        height: $minHeight
    *+html &
        min-height: $minHeight
于 2012-04-27T21:33:12.490 回答