Search code examples
csssasscompass-sass

How to use !default in a SASS mixin?

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.

Solution

  • 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