SASS 关键帧未按需要编译

Question

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

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

这也不是你的混入问题，因为这个 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;
      } 
    }

}