There is one block of CSS that I find myself writing all the time. It's this:

  position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

The ol' cover e-v-e-r-y-t-i-n-g block. That's the kind of thing I like to turn into:

  @mixin coverer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

I've said in the past I think @mixins with no parameters are good use cases for @extend. I still think that's generally true, but something about these super generic blocks that makes me more comfortable with a @mixin. I think it's because @extend works by comma-separating selectors (which is fantastic), but it's not very obvious to me where that selector ends up. There could be a lot of code in between that and the new selector, meaning anything in between with the same specificity could interfere. Probably more of a personal mental block than anything. Anyway.

This is a combo I've been using a lot as well:

  @mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

It's a darn fine way to center something. It works even when:

  1. You don't know know how big it is
  2. You don't know how big the container is, either.

Which is pretty common in Super Percentage Responsive Design Land®.

Just for kicks, here's a few more (hey, I got my toolbox.scss file open anyway):

  @mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@function black($opacity) {
  @return rgba(black, $opacity)
}
@function white($opacity) {
  @return rgba(white, $opacity)
}


51,408 31 136