Skip to content

Instantly share code, notes, and snippets.

@mike-henderson

mike-henderson/micro-clearfix-mixin.scss

Last active August 8, 2021 10:57
Show Gist options
  • Save mike-henderson/4948107 to your computer and use it in GitHub Desktop.
Save mike-henderson/4948107 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
micro-clearfix-mixin.scss
@mixin clearfix-micro() {
& {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
//Usage:
.whatever {
@include clearfix-micro();
}
@alkaithil
Copy link

As no arguments are passed, are you sure you need a mixin? Have you considered the use of @extend?

@crswll
Copy link

crswll commented Jan 7, 2015

I tried it with @extend and it ended badly. It doesn't work inside a media query in ruby sass and works very wrongly in libsass. Just a heads up!

@FlashJunior
Copy link

If you need it for IE9+ you can use:

@mixin clearfix {
  &::after {
    clear: both;
    content: "";
    display: table;
  }
}

source: bourbon

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