4

I am working with the new CSS3 animation properties and the painful part of it is that for each color effect, you have to have a full set of 

 @keyframes greenEffect {
      .effect(@green)
}

@-moz-keyframes greenEffect /* Firefox */ {
      .effect(@green)
}

@-webkit-keyframes greenEffect /* Safari and Chrome */ {
      .effect(@green)
}

Now when I have 16 colors or so, I really don't want to copy + paste 16 blocks of code. 16 lines are bad enough.

To reduce workload, I need to find a way to do selector interpolation with @rule

I found out that selector interpolation syntax is @{VARIABLE-NAME} after 1.3.1, but it throws a compile error when used together with @keyframes, or @-moz-keyframes

I am very new to LESS so I tried something like

.xBrowserEffect (@color, @className){
 @keyframes @{className} {
      .effect(@color)
}

@-moz-keyframes @{className} /* Firefox */ {
      .effect(@color)
}

@-webkit-keyframes @{className} /* Safari and Chrome */ {
      .effect(@color)
}

}

With this I want to be able to execute 

.greenEffect{
  .xBrowserEffect (@green, greenEffect)
}

and LESS will generate all that 3 select propert blocks

I wonder if anyone knows a different approach to get this done. Thank you in advance.

I am using lessc 1.3.3 at the moment, but any solutions for less 1.4.0 is welcome.

ttback
  • 2,051
  • 5
  • 27
  • 40
  • I've previously encountered the same problem, and posted a solution in the [other question](http://stackoverflow.com/questions/9166152/sign-and-variables-in-css-keyframes-using-less-css). My answer is even less verbose: The content inside the vendor-prefixes is not repeated for each vendor, but looped through. – Rob W Apr 07 '13 at 16:11

1 Answers1

2

Technically that's not "selector interpolation", it's "at-rule interpolation".

@rules aren't selectors strictly speaking, so this is not supported. I believe there are existing feature requests for this though, if not feel free to create one.

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
  • 1
    Ah, I'd previously suggested in an answer (now deleted) that it was a problem with the variable interpolation syntax the asker was using. I didn't think it was actually restricted to selectors - this explains why my solution of correcting the variable syntax didn't work. – BoltClock Apr 07 '13 at 05:19
  • Yeah, it's not something obvious - a lot of people think the same. implementation-wise, @rule interpolation is a lot more complicated than selector interpolation, but it's a popular request. I'd like to see it myself someday – jonschlinkert Apr 07 '13 at 05:32
  • I also saw some issue requests on SASS's github 2 years ago about doing the same thing. I think it could be a small tie-breaker for using LESS over SASS if LESS gets it done first. – ttback Apr 07 '13 at 16:12
  • 1
    @BoltClock Your deleted answer would work *if* you use an intermediate escaped variable: `@tmp: ~"@keyframes @{className}"; @{tmp} { ... }`. However, the result will be wrong, because `.effect(@color)` would have to contain `0%`, `10%`, 100%`, etc. blocks, which are expanded by LESS. I've voted to close the Q as a duplicate of [@ sign and variables in CSS keyframes using LESS CSS](http://stackoverflow.com/questions/9166152/sign-and-variables-in-css-keyframes-using-less-css), because the problems are identical, and any solution (possibly different from my answer) would apply to both questions. – Rob W Apr 07 '13 at 16:27
  • @RobW, it's not a duplicate. The other question you're referring to is about "keyframes" specifically, and as it stands the question does not ask about interpolation specifically. Just because your answer includes interpolation does not make the question exclusive to that. This question, however, is about `@rule` interpolation. As an aside, why does everyone vote to close other questions so they can get more points on their own answers? I see this happen a lot. – jonschlinkert Apr 07 '13 at 17:15
  • @jonschlinkert Look up the code in both questions, and you'll see that the problems are identical: Reducing code repetition by using LESS mixins, applied on `@keyframe` rules. The fact that the answer was written by me doesn't matter (to be fair, I also disclosed my affiliation with the answer). Reply to your aside: Questions aren't closed to boost other's reputation, but to avoid duplication of information. When I spot a duplicate (it's easier to identify them if you've seen many of them before), I will vote accordingly (there's no point in writing the same answer twice, right?). – Rob W Apr 07 '13 at 17:26