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:
- You know know how big it is
- 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)
}
Just testin' comments on this here new fangled blog.
What's your take on @mixin vs. @extend? Or have I missed that previously? I have @extends defined for things that are static (like your ellipsis) and only use @mixins when I need it to take a variable. I realize this has implications for media queries, but are there other reasons for choosing the @mixin way?
CodePen-powered user's blog upcoming? :)
This blog feature is sweet @chriscoyier!
Oh man and the animation of the heart function is dope.
I use this placeholder a lot:
@shaunrfox I sort of talk about that in the article:
@shaunrfox Nope. Unless you are having issues with @extend in media queries, use them for static values. Mixins whenever you need to pass variables.
I would also split the coverer into two. One fixed and one absolute. If the content of the site is higher than viewport you can scroll past the coverer/overalay and that's not what you want.
@binary-solo That's fair. I might even split the centerer into two as well (or three) for "just vertical", "just horizontal", or "both".
My only worry is that as soon as mixins get sufficiently complicated, my own desire to use them diminishes. Again just a personal block.