есть способ избежать @ при написании Mixins в SASS?

Question

Я пытаюсь написать mixin для анимации в css3. Для анимации в css3 требуется @keyframe. Но объявление mixin в SASS (и других объявлениях) начинается с @ тоже. Как @mixin, @for и т. Д. Итак, то, что я пытался написать для микширования для анимации (я пытался все автоматизировать внутри mixin), заключалось в том, чтобы @keyfram экранировался для SASS при передаче в CSS не для интерпретации @ ключевого кадра @. Можно ли сделать это?

Пример:

@mixin animation(
//variables : 
$mykeyframe:mykeyframe, 
$prop1:background, 
$value1-i:white, 
$value1-e:red, 
$prop2:color, 
$value2-i:black, 
$value2-e:white, 
$prop3:font-weight, 
$value3-i:400, 
$value3-e:bold, 
$time:5s, 
$iteration-count:1, 
$timing-function:linear, 
$delay:0s, 
$direction:normal, 
$play-state:running 
) 

{//HERE'S THE PROBLEM : 
    @keyframes $mykeyframe{ 
    0%{$prop1:$value1-i; $prop2:$value2-i; $prop3:$value3-i} 
    100%{$prop1:$value1-e; $prop2:$value2-e; $prop3:$value3-e} 
    } 

    -webkit-animation: $mykeyframe $time $iteration-count; /* Chrome, Safari 5+ */ 
    -moz-animation: $mykeyframe $time $iteration-count; /* Firefox 5-15 */ 
    -o-animation: $mykeyframe $time $iteration-count; /* Opera 12.00 */ 
    animation: $mykeyframe $time $iteration-count; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ 

    /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ 
    animation-timing-function: $timing-function; 
    animation-delay: $delay; 
    animation-direction: $direction; 
    animation-play-state: $play-state; 
    /* Safari and Chrome: */ 
    -webkit-animation-timing-function: $timing-function; 
    -webkit-animation-delay: $delay; 
    -webkit-animation-direction: $direction; 
    -webkit-animation-play-state: $play-state; 
} 

Answer 1

Даже если примесь (@mixin) и условное (@for, @if и т.д.) директивы в SASS начинаются с символа @, вы можете использовать его для других ключевых слов, которые не являются частью библиотеки SASS как if, mixin и т.д.

Итак, вы все еще можете сделать:

@mixin animation($mykeyframe:mykeyframe) { 
    @keyframes $mykeyframe { 


    } 
} 

body { 
    @include animation(someframe); 

} 

и это будет генерировать:

body { 
    @keyframes someframe {} 
}