Недоумение от mixins и $ переменных в Sass

Question

Sass новичок здесь. Игра с миксинами. Что-то не так:

$> sass -v 
Sass 3.4.23 (Selective Steve) 

$> cat myscss.scss 

// Keyframe animations 
@mixin keyframes($animation-name) { 
    @-webkit-keyframes $animation-name { 
    @content; 
    } 
} 

@include keyframes(move-up) { 
    0% { 
    top: 25px; 
    opacity: 1; 
    } 

    100% { 
    top: -50px; 
    opacity: 0; 
    } 
} 


$> sass myscss.scss 
@-webkit-keyframes $animation-name { 
    0% { 
    top: 25px; 
    opacity: 1; } 
    100% { 
    top: -50px; 
    opacity: 0; } } 

И в этом проблема. Я ожидал:

@-webkit-keyframes move-up { 
    0% { 
    top: 25px; 
    opacity: 1; } 
    100% { 
    top: -50px; 
    opacity: 0; } } 

Что мне не хватает?

Пожалуйста, несите с моим добавлением или бессмысленным текстом здесь. Очевидно, stackoverflow не позволит мне опубликовать мой вопрос, потому что они видят слишком много кода и слишком мало текста. Надеюсь, этого достаточно.

Answer 1

погуглить вокруг, я вижу, что это делает трюк, но почему это происходит, не ясно мне:

@mixin keyframes ($animation-name) { 
    @-webkit-keyframes #{$animation-name} { 
    @content; 
    } 
}