Sass – clearfix mixin

The clearfix hack is a must have component in web development.

/* The clearfix hack */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

 

When styling with Sass, instead of inserting the clearfix class into the HTML element, i will create a mixin and include it in the selector whenever i need the clearfix.

// The clearfix mixin
@mixin clearfix {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// Apply clearfix on .parent
.parent {
  @include clearfix;
}

 

Done =)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s