如何使用转换在 saas 中为关键帧创建 mixin

Question

我正在处理 sass 文件。我有一个与 mixin 相关的问题。我为关键帧创建了一个混合插件，但我不知道如何创建。我在下面添加了我的代码。请查看我的代码，并为此创建一个 mix-ins。如果我直接在编译的 css 文件中复制此代码，则 css 文件会自动删除这些关键帧。我正在 sass 文件中工作。我有一个与 mixin 相关的问题。我为关键帧创建了一个混合插件，但我不知道如何创建。我在下面添加了我的代码。请查看我的代码，并为此创建一个 mix-ins。如果我直接在编译的 css 文件中复制此代码，则 css 文件会自动删除这些关键帧。

.heart-beat {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 25px;
    width: 25px;
    z-index: 10;
    border: 5px solid #ef5350;
    border-radius: 70px;
    -moz-animation: heartbit 1s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-animation: heartbit 1s ease-out;
    -o-animation-iteration-count: infinite;
    -webkit-animation: heartbit 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; 
}


@-moz-keyframes heartbit {
    0% {
        -moz-transform: scale(0);
        opacity: 0.0; }
    25% {
    -moz-transform: scale(0.1);
        opacity: 0.1; }
    50% {
        -moz-transform: scale(0.5);
        opacity: 0.3; }
    75% {
        -moz-transform: scale(0.8);
        opacity: 0.5; }
    100% {
        -moz-transform: scale(1);
        opacity: 0.0; } 
}

@-webkit-keyframes heartbit {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0; }
    25% {
        -webkit-transform: scale(0.1);
        opacity: 0.1; }
    50% {
        -webkit-transform: scale(0.5);
        opacity: 0.3; }
    75% {
        -webkit-transform: scale(0.8);
        opacity: 0.5; }
    100% {
        -webkit-transform: scale(1);
        opacity: 0.0; } 
}

Answer 1

这是 的示例。mixin这可能对您有所帮助。wherekeyframe()用于调用关键帧前缀，然后prefixed()用于transform 属性。

要查看编​​译代码请使用SASS Meister 在线工具

   // This is for iterating `Keyframes`    
        @include keyframes(heartbit){

    // This is for iterating `transform`
        @include prefixed(transform, scale(0.1);

        }

注意：您需要在 mixin 下声明它。

// Mixin

// prefix declarations
    @mixin prefixed($property, $value) {

        -webkit-#{$property}: #{$value};
        -moz-#{$property}: #{$value};
        -ms-#{$property}: #{$value};
        -o-#{$property}: #{$value};
        #{$property}: #{$value};

    }

    // prefix keyframes
    @mixin keyframes($name) {

        @-webkit-keyframes #{$name} {
          @content;
         }

        @-moz-keyframes #{$name} {
          @content;
        }

        @-ms-keyframes #{$name} {
          @content;
        }

        @-o-keyframes #{$name} {
          @content;
        }

        @keyframes #{$name} {
        @content;
      }
    }