Interpolate variables in keyframe selector name

[mechanicalduck]

Variables in keyframe selectors are not interpolated (it works in @Keyframes, though).

Input:

$cur-frame: 10%;

#{$cur-frame} {
  color: red;
}

Ruby sass output (expected):

10% {
  color: red;
}

Libsass output (not interpolated):

#{$cur-frame} {
  color: red;
}

sassc: 3.1.0-13-g4e9a
libsass: 3.2.0-beta.1-3-gdea2
sass2scss: 1.0.3

With best regards

[xzyfer]

Thanks for the report @mechanicalduck.

I'm unable to reproduce this in 3.2.0-beta.1

➜  libsass git:(master) ✗ sassc -v
sassc: 3.1.0-13-g4e9a
libsass: 3.2.0-beta.1-3-gdea2
sass2scss: 1.0.3
➜  libsass git:(master) ✗ sassc test.scss
10% {
  color: red; }

Could you try you try a fresh compilation (make clean && make) and see if this issue still persists?

If so please provide the environment you're running on.

[mechanicalduck]

So the first example compiles indeed correctly after all.

However, it won't compile correctly when the keyframe selector is wrapped in a @Keyframes selector (necessary for a css animation).

@keyframes test {
  $cur-frame: 10%;
  #{$cur-frame} {
    color: red;
  }
}

libsass output:

@keyframes test {
  #{$cur-frame} {
    color: red;
  }
}

ruby sass output:

@keyframes test {
  10% {
    color: red; } }

Thanks.

[xzyfer]

You're correct, apologies. I was using the sample code supplied.

Could you please create a [sass-spec](https://github.com/sass/sass-spec] for this issue? You can use the following as a good template https://github.com/sass/sass-spec/tree/master/spec/libsass-todo-issues/issue_823

[mechanicalduck]

I am glad this has been added to the 3.2 milestone.

[mechanicalduck]

Added Pull Request for the specs:
sass/sass-spec#279

[mechanicalduck]

The 'needs test' tag could be removed now I guess -
except the case of course that more extensive tests are needed.

With best regards.

[xzyfer]

For reference this is the @keyframes grammar

keyframes_rule: KEYFRAMES_SYM S+ IDENT S* '{' S* keyframes_blocks '}' S*;

keyframes_blocks: [ keyframe_selector '{' S* declaration? [ ';' S* declaration? ]* '}' S* ]* ;

keyframe_selector: [ FROM_SYM | TO_SYM | PERCENTAGE ] S* [ ',' S* [ FROM_SYM | TO_SYM | PERCENTAGE ] S* ]*;

@{K}{E}{Y}{F}{R}{A}{M}{E}{S}   {return KEYFRAMES_SYM;}
{F}{R}{O}{M}                   {return FROM_SYM;}
{T}{O}                         {return TO_SYM;}

From http://www.w3.org/TR/css3-animations/