Skip to content

Instantly share code, notes, and snippets.

@jslegers
Last active October 30, 2018 12:59
Show Gist options
  • Save jslegers/6048393 to your computer and use it in GitHub Desktop.
Save jslegers/6048393 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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
Copy link

nice.

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