我们可以使用像＆符号这样的东西作为动画关键帧名称吗？

Question

例如我有一个 css 代码

.className {
  animation: keyframesName 10s;
  @keyframes keyframesName {
    0% {...}
    100% {...}
  }
}

我在想我们是否可以做类似 &_keyframesName 的事情来防止重复的 keyframeName 声明。

我还没有发现 SCSS 文档有这样的东西...有人吗？

Answer 1

如果只是为关键帧取一个唯一的名称，那么您可以使用 unique-id function:

string.unique-id()
unique-id() //=> string 
Returns a randomly-generated unquoted string that’s guaranteed to be a valid CSS identifier and to be unique within the current Sass compilation.

您的示例如下所示：

@use "sass:string";

.class {
    $keyframesName: string.unique-id();
    animation: $keyframesName 10s;
    @keyframes #{$keyframesName} {
        0% {}
        100% {}
    }
}

或者使用 discouraged 全局别名：

.class {
    $keyframesName: unique-id();
    animation: $keyframesName 10s;
    @keyframes #{$keyframesName} {
        0% {}
        100% {}
    }
}

示例结果：

.class {
  animation: uw4m92d 10s;
}
@keyframes uw4m92d {}

我们可以使用像＆符号这样的东西作为动画关键帧名称吗？

Can we use something like ampersand for animation keyframe name?

sass