上一篇: css – 具有轮廓和伪元素的Firef... 下一篇:css – Bootstrap 4 – 崩溃之外...

Sass Keyframes动画mixin生成无效的CSS

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Sass Keyframes动画mixin生成无效的CSS，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有以下关键帧mixin,但它似乎生成无效的CSS：

@mixin keyframes($animationName)
{
    @-webkit-keyframes $animationName {
        @content;
    }
    @-moz-keyframes $animationName {
        @content;
    }
    @-o-keyframes $animationName {
        @content;
    }
    @keyframes $animationName {
        @content;
    }
}

@include keyframes(icon-onE) {
        0% {
          opacity: 1;
        }
        33% {
          opacity: 0;
        }
        66% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
}

这是输出：

@-webkit-keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes $animationName {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

它不是将关键帧的名称设置为icon-one,而是写出$animationName.

解决方法

您需要对关键帧名称的变量使用字符串插值.你的关键帧mixin需要像这样写：

@mixin keyframes($animationName)
{
    @-webkit-keyframes #{$animationNamE} {
        @content;
    }
    @-moz-keyframes #{$animationNamE}  {
        @content;
    }
    @-o-keyframes #{$animationNamE} {
        @content;
    }
    @keyframes #{$animationNamE} {
        @content;
    }
}