How to load keyframe from imported (@use) Sass file?

Question

(Dart Sass) I am attempting to load the following keyframes located in _global.sass into local.sass. I have tried several implementations of calling bgGradient, but none have worked so far.

_global.sass

@keyframes bgGradient
    0%
        background-position: 0% 50%
    50%
        background-position: 100% 50%
    100%
        background-position: 0% 50%

local.sass

@use '_global' as global
div.wrapper
    animation: global.bgGradient 15s ease 

Receiving the following error:

Syntax Error: SassError: expected "(".
    animation: global.bgGradient 15s ease infinite
                                ^

Answer 1

@keyframes is not a scss/sass feature but rather plain css. Therefore you cannot "use" it like you would variables, mixins or functions.

Input:

// _globals.sass

$width: 20px

@keyframes bgGradient
    0%
        background-position: 0% 50%
    50%
        background-position: 100% 50%
    100%
        background-position: 0% 50%

.foo
    width: $width

// local.sass

@use 'global'

div.wrapper
    width: global.$width
    animation: bgGradient 15s ease 

Output:

@keyframes bgGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.foo {
    width: 20px;
}

div.wrapper {
    width: 20px;
    animation: bgGradient 15s ease;
}

Note how .foo and @keyframes bgGradient are both included in the output. This means that as long as you @use the partial that has some keyframes somewhere you'll be able to use those keyframes throughout all the sass files that make up your local.css file, Just like @import would work.