Clearfix Doubles When Mixin is used

[ElijahFowler]

When the .clearfix() mixin is used it outputs two sets of clearfix css. Like such:

.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
  content: "";
  display: table;
}
.dl-horizontal dd:after {
  clear: both;
}

This is caused by having the mixin and the clearfix in the utilities with the same name.

Mixin

.clearfix() {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

Utility

.clearfix {
  .clearfix();
}

I suggest fixing it by removing the parentheses on the mixing and removing the utility call altogether, that way the clearfix specific css will be generated but it still can be used as a mixin.

[BBosman]

It's been reported before: #8947