0

I've been lurking around for a mixin that would create prefixed keyframes declarations, but i couldn't find anything that actually work as it should without ugly fixes.

So far i've managed to create the following mixin: 

.keyframes(@identifier, @animation) {
  .frames { content: ~"'';} @-webkit-keyframes @{identifier} {@{animation}} @-moz-keyframes @{identifier} {@{animation}} @-ms-keyframes @{identifier} {@{animation}} @-o-keyframes @{identifier} {@{animation}} @keyframes @{identifier} {@{animation}"}
}

Where the usage would be:

.keyframes(fade-in, ~"0% { opacity: 0; }50% { opacity: 0; }100% { opacity: 1; }");

I feel like this is just plain wrong in matters of readability and also it creates a rule ( .frames { content: '' }; ) for each time the .keyframes() mixin is called.

Is there another way of doing this nicely?

Sidenote: When i type npm info less --version it returns 1.4.28 if that's important.

Jari Thorup Palo
  • 519
  • 1
  • 6
  • 17
  • 2
    Use autoprefixer ([1](https://github.com/less/less-plugin-autoprefix), [2](https://github.com/postcss/autoprefixer) etc.) instead. For the ancient and obsolete mixin-based solution see http://stackoverflow.com/questions/11551313. – seven-phases-max Nov 10 '15 at 12:37
  • and btw. `npm info less --version` is invalid `npm` command (it actually prints `npm` version not `less`). Use `lessc --version` or `npm view less` instead. – seven-phases-max Nov 10 '15 at 12:42
  • @seven-phases-max thx for the tips regarding version. My version seems to be 2.5.3, which makes this issue not so ancient anymore (i guess). – Jari Thorup Palo Nov 10 '15 at 14:10
  • it's not the issue that ancient but the mixin-based solution. There's *absolutely* no reasons to use manually hardcoded prefixing mixins instead of normal CSS code you are with autoprefixer. – seven-phases-max Nov 10 '15 at 14:23
  • I will lookup the autoprefixer, the problem is that it's a huge code base with a multitude of people working on it. This means that not everyone that will compile the less will have the plugin (straight away anyhow). What i am trying to achieve is to improve a small module using "vanilla" less. – Jari Thorup Palo Nov 10 '15 at 14:28
  • Well, but then not everyone will have the required Less version/compiler for the tricky mixins to work - so it's the same story. – seven-phases-max Nov 10 '15 at 15:32
  • **First**: Yes, that's true. I think i could update the package.json file to force version update and make the update process easy at the same time though. The less plugins could be added there as well i guess. **Having said that**: Iv'e tried the postcss autoprefixer, and i must say i am really-really impressed..! This will ease our less development alot..! This solved not only this problem, but loads more. Thanks mate! – Jari Thorup Palo Nov 11 '15 at 08:38
  • @seven-phases-max, would you please add an answer to this question so i can mark it as the fix for my question? For now i have added an answer to my own question. Thanks! – Jari Thorup Palo Nov 11 '15 at 08:44

1 Answers1

0

@seven-phases-max had some really helpful comments regarding this. The fix ended up being to use a post compile processing for css (https://github.com/postcss/autoprefixer), which also helped me/the teams i am currently working with with other tasks as well.

For details, please refer to comments in the question.

Jari Thorup Palo
  • 519
  • 1
  • 6
  • 17