How to use !default in a SASS mixin?
compass-sass, css, sass
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
Problem
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.