To mixin or not to mixin

1 min read

I’m still relatively new to using SASS so I may not know the reason why people prefer using this technique…

Seems like people (examples I’ve seen so far) prefer using @mixin for a clearfix as to just having a clearfix class and using @extend instead.

An example would be this (taken from David Walsh’s post on CSS-Tricks):

@mixin clear() {
  &::before,
  &::after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }

  &::after {
    clear: both;
  }
}

So, this would add the whole clearfix code to the class you are styling.

Isn’t this a bit excessive? Especially if you have a clearfixes all over the place (although you’d probably avoid that as much as possible?)

Why not @extend the clearfix so it just adds the class to the clearfix code instead? It’s less code output and it’s probably not something you’d change anyway.

Anyway, this has always been a thought of mine. Happy to be convinced otherwise but I’m sticking with my way for the time being.

design css