从 SASS 列表生成关键帧答案

【问题标题】：Generate keyframes from a SASS list从 SASS 列表生成关键帧
【发布时间】：2018-11-07 03:49:35
【问题描述】：

我尝试从 SASS 中的列表中自动生成关键帧。

我用 CSS 属性构造了一个 SASS 列表

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

然后我尝试使用@each 生成我的 CSS 动画的关键帧。

@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.

有人可以帮我吗？

谢谢

【问题讨论】：

标签： css list sass each

【解决方案1】：

我认为你不能使用字符串，只能使用键值对。这种方式应该可以工作：

$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 ;
    }
}

【讨论】：