CODEWITHSUNDEEP
csssasscompass-sass
Wabbitseason
Wabbitseason

Reputation: 5691

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.

Upvotes: 10

Views: 20794

Answers (2)

Wabbitseason
Wabbitseason

Reputation: 5691

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

Upvotes: 8

Waiting for Dev...
Waiting for Dev...

Reputation: 13029

!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.

Upvotes: 14

Related Questions