_a_readme.md

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.

_clearing.scss

.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;
}

clearing.css

.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;
}