SASS 关键帧未按需要编译 [英] SASS keyframes not compiling as wanted

问题描述

我在 SCSS 中使用了以下关键帧混合

I am using the following keyframes mixin for SCSS

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

它工作得很好，当我必须动画时，它具有 animation 属性，但是当我尝试将它用于子元素时，我得到的不是我需要的输出(但语法有效)

it works perfectly, when i have to animate, which has the animation property, but when i try to use it for child elements i get not the output, that i need (but syntax-valid)

示例:

@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 抢断第一个括号?

How can i prevent sass from snapping the first brackets?

推荐答案

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

As far as i am concerned you apply keyframes to an element. so your desired output:

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

在 CSS 中没有多大意义.

does not make much sense in CSS.

我认为您需要的是:

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

这也不是你的混入问题，因为这个 SASS:

also it is not your mixin problem as this SASS:

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

编译为:

0%  span {
  color: red; }

100%  span {
  color: green; }

根据需要.

我认为关键帧 mixin 的预期用途是:

I think the intended usege of your keyframes mixin would be something like:

span#text {

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

}

这篇关于SASS 关键帧未按需要编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！