Can we use something like ampersand for animation keyframe name?

user_1257916 0
Viewed 33

For example I have a css with code

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

I'm thinking if we can do something like &_keyframesName to prevent duplicate keyframeName declare.

I haven't find SCSS document has something like this... anyone?

sass
1 Answers

If it's just about having a unique name for the keyframe, then you can use the 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.

Your example would look the following:

@use "sass:string";

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

Or using the discouraged global alias:

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

Example result:

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