How to use !default in a SASS mixin?
Solution 1
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
Solution 2
!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.
Aquaholic
Updated on February 13, 2020Comments
-
Aquaholic about 4 years
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
(ormin-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.
-
Aquaholic about 12 yearsThank you for the response but as you have mentioned using
!important
is generally unadvisable, so I cannot accept your answer, besides I have found a solution myself. -
maxbeatty almost 12 yearsWhy not pass in
$minHeight
to your mixin and set the default like@mixin micro-clearfix($minHeight: 1%)
?