Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Clearfix code without duplication
%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;
}
}
@jslegers

This comment has been minimized.

Copy link
Owner Author

@jslegers jslegers commented Jul 21, 2013

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: " ";
}
@sethburtonhall

This comment has been minimized.

Copy link

@sethburtonhall sethburtonhall commented Jul 21, 2013

nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment