The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why won't this @mixin work? Reply To: Why won't this @mixin work?


I agree with all of that. I’m trying to code lean and mean these days, which causes me to sometimes focus on minimalism over anything else… almost to a fault. This mixin might seem a little verbose and maybe it’s not written in the most efficient way. But it’s goal is to save lines upon lines of unneeded prefixes.

I actually SPECIFICALLY wrote this for my new site because it will need a ton of prefixing for some animations I want to do.

In this post, @ChrisCoyier says this:

One mistake I sometimes see is that people just use all the major prefixes on every CSS3 property. It appears they have a generic mixin that they just put everything through that slaps on the prefixes. If you’ve seen something like -o-border-radius, that’s what I mean. That has never existed and never needs to go into your CSS.

My first instinct was to use a Compass mixin to handle it. But he has a point that those mixins are ‘dumb’ for lack of a better word and make no distinction between properties. Therefore, you get prefixes that aren’t necessary now and in fact have NEVER been necessary.

Although… in the end, what does it really matter? You’re talking about a few extra kilobytes… IF THAT by having the extra code. And I guess if it doesn’t break anything… who cares? Especially on this site… it’s flat design with no images. There might be a few SVGs but most of the graphics are pure CSS… which means a crazy small site. I’m shooting for the whole thing to be under 50KB.

You know me dude, this is mostly a philosophical exercise… I still might use it though. If nothing else, now I know I need to use interpolation… which I don’t know why I didn’t think to do that.