Генерация ключевых кадров из списка SASS - PullRequest
Новая
       26

Генерация ключевых кадров из списка SASS

0 голосов
/ 28 мая 2018

Я пытаюсь автоматически генерировать ключевые кадры из списка в SASS.

Я создаю список SASS со свойством CSS 

$anim: (('color: #f00','background-color: #0f0'),
        ('color: #0f0','background-color: #00f')    
);

Затем я пытаюсь сгенерировать ключевые кадры моей CSS-анимации с помощью @each. 

@keyframes my-anim {
    $i: 1 ;
    @each $item in $anim {
        #{$i * 10}% {      
            @each $property in $item {
                #{$property};
            }   
        }
        $i: $i + 1 ;
    }
}

Нопри попытке скомпилировать мой код у меня появляется эта ошибка: 

"/usr/local/bin/sass" "--cache-location" "/Users/julien/Library/Caches/NetBeans/8.2/sass-compiler" "--trace" "/Users/julien/Sites/Tests/scss/style.scss" "/Users/julien/Sites/Tests/css/style.css"
/Users/julien/Sites/Tests/scss/style.scss:62: Invalid CSS after "...   #{$property}": expected "{", was ";" (Sass::SyntaxError)
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:1278:in `expected'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:1208:in `expected'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:1203:in `tok!'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:677:in `block'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:747:in `declaration_or_ruleset'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:686:in `block_contents'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:678:in `block'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:319:in `each_directive'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:234:in `special_directive'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:209:in `directive'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:686:in `block_contents'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:678:in `block'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:747:in `declaration_or_ruleset'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:686:in `block_contents'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:678:in `block'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:319:in `each_directive'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:234:in `special_directive'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:209:in `directive'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:697:in `block_child'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:689:in `block_contents'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:225:in `directive_body'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:217:in `directive'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:696:in `block_child'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:689:in `block_contents'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:137:in `stylesheet'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/scss/parser.rb:41:in `parse'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/engine.rb:414:in `_to_tree'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/engine.rb:389:in `_render_with_sourcemap'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/engine.rb:307:in `render_with_sourcemap'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:391:in `run'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:63:in `process_result'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/base.rb:52:in `parse'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/lib/sass/exec/base.rb:19:in `parse!'
from /Library/Ruby/Gems/2.0.0/gems/sass-3.5.1/bin/sass:13:in `<top (required)>'
from /usr/local/bin/sass:23:in `load'
from /usr/local/bin/sass:23:in `<main>'
Done.

Кто-нибудь может мне помочь?

Спасибо

1 Ответ

0 голосов
/ 28 мая 2018

Я думаю, что вы не можете использовать строки, но только пары ключ-значение.Таким образом должно работать: 

$anim: ((color: #f00,background-color: #0f0),
        (color: #0f0,background-color: #00f)    
);

@keyframes my-anim {
    $i: 1 ;
    @each $item in $anim {
        #{$i * 10}% {      
            @each $key,$value in $item {
                #{$key}: #{$value};
            }   
        }
        $i: $i + 1 ;
    }
}
...