Question

我试图为像这样的关键帧创建一个SCSS mixin -

 get text value == <UITextField: 0x7f8d6548bcf0; frame = (16 366; 185 30); text = 'Shoaib Anwar'; clipsToBounds = YES; hidden = YES; opaque = NO; autoresize = RM+BM; gestureRecognizers = <NSArray: 0x608000254ca0>; layer = <CALayer: 0x60800022b480>>

并申请这样的div：

@mixin useKeyframes($name, $duration, $direction) {
    -webkit-animation: $name $duration $direction;
    -moz-animation: $name $duration $direction;
    -ms-animation: $name $duration $direction;
}

获得所需的效果：

.divs-class-name {
    @include useKeyframes(myAnimationName, 1s, forwards) {
    }
}

但我在编译中遇到错误：

.divs-class-name {
    -webkit-animation: myAnimationName 1s forwards;
    -moz-animation: myAnimationName 1s forwards;
    -ms-animation: myAnimationName 1s forwards;
}

我认为我以错误的方式连接mixin中的参数。还有其他办法吗？

Answer 1

错误说你必须在你的mixin中有一个@content，或者只是在尝试@include your mixin时删除大括号，它应该可以工作。

此处有更多详情About @content in scss

Answer 2

最后我@included混合的问题就是问题。用@include useKeyframes(myAnimationName, 1s, forwards);代替它！

以下是整个代码：

@mixin useKeyframes($name, $duration, $direction) {
  -webkit-animation: $name $duration $direction;
  -moz-animation: $name $duration $direction;
  -ms-animation: $name $duration $direction;
}

.divs-class-name {
  @include useKeyframes(myAnimationName, 1s, forwards); 
}

感谢@ 3rdthemagical！

一个接一个地为SCSS mixin使用多个参数

2 个答案: