This is how you can do truly semantic clearfixing easily in Sass.
The @extend directive is used to inherit the .group class for other selectors. Sass takes care of spreading the selectors around for you.
This is how you can do truly semantic clearfixing easily in Sass.
The @extend directive is used to inherit the .group class for other selectors. Sass takes care of spreading the selectors around for you.
.group:after { | |
visibility: hidden; | |
display: block; | |
clear: both; | |
height: 0; | |
font-size: 0; | |
content: " "; | |
* html & { | |
height: 1%; | |
} | |
*:first-child+html & { | |
min-height: 1px; | |
} | |
} | |
#content, | |
#sidebar, | |
#some .other .thing { | |
@extend .group; | |
} |
.group:after, | |
#content:after, | |
#sidebar:after, | |
#some .other .thing:after { | |
visibility: hidden; | |
display: block; | |
clear: both; | |
height: 0; | |
font-size: 0; | |
content: " "; | |
} | |
* html .group:after, | |
* html #content:after, | |
* html #sidebar:after, | |
* html #some .other .thing:after, | |
#some .other * html .thing:after { | |
height: 1%; | |
} | |
*:first-child + html .group:after, | |
*:first-child + html #content:after, | |
*:first-child + html #sidebar:after, | |
*:first-child + html #some .other .thing:after, | |
#some .other *:first-child + html .thing:after { | |
min-height: 1px; | |
} |
Yes in the general case complex extends must be permuted to account for various possible DOM structures. However I think we can safely add a heuristic around selectors that mention html and body.
I suppose it's technically harmless, but does it really compile the ie6 and ie7 filter hacks by doubling up on them?
The compiled output shows:
#some .other * html .thing:after
and
*:first-child + html #some .other .thing:after,
#some .other *:first-child + html .thing:after