1
resposta

@mixin SASS não funcionando

A função @mixin e @include não estão funcionando. Conseguir resolver o erro do import e do calc, e acredito que nessa mudança de sintaxe, alguma coisa mudou ali também. Alguém conseguiu resolver?

@import '../abstract/_variaveis.scss'

@mixin bg-cores($cores...)
    background: linear-gradient(to left, $cores)

footer
    text-align: center
    font-size: calc($tamanho-do-texto / 2)
    border-top: 2px solid $cor-primaria
    margin-top: 1rem
    padding: 1.2rem
    @include bg-cores($cor-primaria, $cor-secundaria, $cor-terciaria, $cor-primaria)

    i
        color: #00fffff
1 resposta

Oi Mike, tudo bem?

Desculpe a demora em te responder!

Utilizei seu código para realizar alguns testes e tudo está funcionando corretamente com relação ao degradê criado pelo @mixin e @include.

A respeito do erro proveniente da importação do arquivo contendo as variáveis do projeto, por mudanças que ocorreram na forma de escrever o arquivo SASS, passou-se a utilizar a mesma sintaxe utilizada nos arquivos SCSS:

@import '../abstract/_variaveis.scs'

Já sobre o cálculo feito para definir o tamanho da fonte, é necessário separar por espaços cada um dos elementos dentro dos parenteses que compõem a função calc(), de modo que obtemos o seguinte resultado:

font-size: calc( $tamanho-do-texto / 2)

Fora os pontos mencionados, que já estavam funcionando adequadamente, o único erro que identifiquei foi na escrita da última linha dos comandos que você compartilhou, onde é informado um código com sete dígitos para a coloração do ícone colocado no rodapé. Para resolver este problema basta utilizar uma cor hexadecimal contendo seis dígitos.

Peço que verifique se a extensão do Live SASS Compiler está funcionando adequadamente. Para isso, observe se no inferior da página há um ícone de telescópio com os dizeres "Watching...", isso simboliza que a extensão está compilando as mudanças no seu arquivo instantaneamente. Caso apareça o ícone de um olho com os dizeres "Watch Sass" clique na mensagem e ative a verificação.

Caso o problema ainda persista, peço que envie o link do projeto no GitHub ou um drive com os arquivos para que assim eu possa verificar o código completo e te ajudar de forma mais assertiva.

Abraço!