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.