[Dúvida] Projeto fokus usando scss e sass

Boa Noite meus caros!!!

Tudo bem por aí???

Estou usando nesse projeto sass e scss, porém, gostaria de declarar um seletor de atributos com variável recebendo um linear-gradient, porém na hora de usar a variável aparenta que a propriedade background não recebe o valor, estou usando o novo conceito de importação com @use

arquivo: variaveis.scss

[data-contexto="foco"]{
  $main-bg-color:linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100% );
}

ou deveria declarar

[data-contexto="foco"]{
  --main-bg-color:linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100% );
}

arquivo importando variaveis.scss

@use 'variaveis'

html{
    background:variaveis.$main-bg-color;
}

Agora no conceito de .css o seletor de atrbiuto com variáveis declarada dentro do corpo do seletor funciona perfeitamente, somente entre aquivos com extensão .css, enquanto no scss não consigo.

[data-contexto="foco"] {
    --main-bg-color: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%);
}

[data-contexto="descanso-curto"] {
    --main-bg-color: linear-gradient(180deg, #0F725C 0%, #041832 48.44%, #01080E 100%);
}

[data-contexto="descanso-longo"] {
    --main-bg-color: linear-gradient(180deg, #1875E9 0%, #041832 48.44%, #01080E 100%);
}

Por favor, alguém saberia a razão de não conseguir declarar variáveis do tipo linear-gradient dentro do seletor de atributos com sass.

Muito obrigado.

Obs: Já resolvido faltou apenas colocar o data-attribute na tag html, faltou referenciar o data-contexto.

Falha minha. Desculpem.