1
resposta

SASS (mixin)

Estou tentando usar um mixin que está no arquivo VARIAVEIS.SCSS, quando eu tento usar ele no meu arquivo HEADER.SCSS, aparece a seguinte mensagem; "Compilation Error Error: Undefined mixin. ╷ 22 │ @include botao (variaveis.$cor-primaria,variaveis.$cor-destaque); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ d:\Programação\Meus Projetos\advocacia\root\sections_header.scss 22:9 @use d:\Programação\Meus Projetos\advocacia\style.scss 3:1 root stylesheet "

minhas variáveis e o mixin é esse;

   $cor-primaria: #0D0D0D;
   $cor-secundaria: #000000;
   $cor-texto: #ffffff;
   $cor-destaque: #BDA86C;
   $cor-botao: #302a344d;
//Fonte
   $fonte-principal: 'Josefin Sans', sans-serif;
   
//Mixins
   @mixin botao($fundo, $fonte-color) {
    background: $fundo;
    color: $fonte-color;
    border: 2px solid variaveis.$cor-destaque;
 }

o código como está no HEADER.CSS ao tentar utilizar;

@use '../variaveis';
.container__apresentacao {
    **dentro desse container tem outros códigos, que náo estão interferindo no funcionamento, por isso decidi apagar.**
    a {             
        @include botao (variaveis.$cor-primaria, variaveis.$cor-destaque);        
1 resposta

Oi, Sávio. Tudo bem?

Como você declarou o mixin dentro do arquivo variaveis, ao fazer a importação com @use você também precisa passar o prefixo antes de usar o mixin. Dessa forma:

@include variaveis.botao(variaveis.$cor-primaria, variaveis.$cor-destaque);

Outra coisa que eu notei, é o uso do prefixo dentro do mixin:

border: 2px solid variaveis.$cor-destaque;

Nesse caso, como a variável foi declarada dentro do próprio arquivo, ela já esta no escopo do mixin, então não necessita do prefixo, dessa forma:

border: 2px solid $cor-destaque;

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado