How to use !default in a SASS mixin?

Question

I have this SASS mixin:

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

Unfortunately, it does not compile, unless I remove !default which would be the point of having this mixin.

The error message I'm getting is:

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

What I'd like to achieve is that if height (or min-height) has already been defined for the selector then the mixin should use that value, otherwise it should define this property as 1%.

I don't wish to use zoom since that's not a valid property and I like to keep my CSS clean.

Am I using !default the wrong way?

I have Compass 0.12.1 and SASS 3.1.10.

Answer 1

!default is intended to use only when declaring variables: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_

What you are trying to do should be done with CSS !important declaration, which should be used in the rule outside the mixin (the one you want to prevail). Anyway, using !important usually it's not a good practice. Maybe you could rely on cascade or specificity.

Answer 2

Here's how I've done it finally:

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