Question

我正在使用以下关键帧mixin for SCSS

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

它完美无缺，当我需要动画时，它具有animation属性，但是当我尝试将它用于子元素时，我得到的不是输出，我需要（但语法有效）

示例：

@include keyframes('text') {
    0% {
        span { color: red; }
    }
    100% {
        span { color: green; }
    }
}

将输出（短输出）：

@keyframes text {
    0% span { color: red; }
    100% span { color: green; }
}

但我需要的是：

@keyframes text {
     0% {
        span { color: red; }
    }
     100% {
        span { color: green; }
    }
}

如何防止sass对齐第一个括号？

Answer 1

就我而言，您将关键帧应用于元素。所以你想要的输出：

@keyframes text {
     0% {
        span { color: red; }
    }
     100% {
        span { color: green; }
    }
}

在CSS中没有多大意义。

我认为你需要的是：

@keyframes span#text {
    0% {color: red; }
    100% { color: green; }
}

这也不是你的mixin问题，因为这个SASS：

0% {
    span { color: red; }
}
100% {
    span { color: green; }
}

汇编为：

0%  span {
  color: red; }

100%  span {
  color: green; }

根据需要。

我认为关键帧mixin的预期用法类似于：

span#text {

    @include keyframes(text) {
      0% {
        color: red;
      }
      100% {
        color: green;
      } 
    }

}

SASS关键帧未按要求编译

1 个答案: