Clearfix code without duplication

_clearfix.scss

%display-block-hacked {
    display: block;
    *zoom: 1;
}

%clear-both {
    clear : both;
}

%blank-as-table {
    display: table;
    content: " ";
}

%clearfix {
    &:before{
        @extend %blank-as-table;
    }
    & {
        @extend %display-block-hacked;
    }
    &:after {
        @extend %blank-as-table;
        @extend %clear-both;
    }
}

Example use :

SCSS INPUT :

div {
        @extend %clearfix
}

main {
        @extend %clearfix
}

.fancyBox {
        @extend %clearfix
}

.imageBox {
        @extend %clearfix
}

CSS OUTPUT :

div, main, .fancyBox, .imageBox {
  display: block;
  *zoom: 1;
}

div:after, main:after, .fancyBox:after, .imageBox:after {
  clear: both;
}

div:before, main:before, .fancyBox:before, .imageBox:before, div:after, main:after, .fancyBox:after, .imageBox:after {
  display: table;
  content: " ";
}

nice.