Sass clearfix version
Posted by info on September 12th, 2012
If you want sass to generate the classes to be generated to support “clearfix”  (clearing all the floats of previous content to be sure the element is always rendered at a new clear line). With the newest sass compiler you can use placeholders that are not generated until they are used  and can be extended.
%clearfix { zoom: 1; &:before, &:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } &:after { clear: both; } } .container { @extend %clearfix; text-align: left; } .footer { @extend %clearfix; text-align: center; }
This will generate:
.container, .footer { zoom: 1; } .container:before, .footer:before, .container:after, .footer:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .container:after, .footer:after { clear: both; } .container { text-align: left; } .footer { text-align: center; }