O gradiente não funciona

Olá Lucas, tudo bem?

Uma possível solução para o seu problema seria verificar se a sintaxe do código está correta. Verifique se as variáveis estão sendo chamadas corretamente e se o gradiente está sendo aplicado na propriedade correta.

Outra dica é verificar se o navegador que você está utilizando suporta a propriedade de gradiente. Alguns navegadores mais antigos podem não suportar essa propriedade.

Caso ainda esteja com dificuldades, seria interessante você compartilhar o código que está utilizando para que possamos analisá-lo melhor e dar uma solução mais precisa.

Espero ter ajudado e bons estudos!

o style.scss ficou assim:

@import'./abstract/base';
@import'./componets/navbar';
@import'./componets/banner';
@import'./componets/serviços';
@import'./componets/cupom';
@import'./componets/_footer.sass';

_footer.sass:

@usestyles/abstract/_variaveis.scss

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

o style.css:

html, body {
font-family: "Roboto", sans-serif;
}

nav {
text-align: center;
}
nav ul li {
display: inline-block;
padding: 1rem;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #495371;
}
nav ul li a:hover {
border-bottom: 2px solid #74959A;
}

.banner {
background: url(../../imagens/banner.jpeg) 27% center no-repeat;
min-height: 350px;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
.banner .inner-banner {
padding: 3rem;
background-color: #F1E0AC;
opacity: 0.9;
border-radius: 45px;
}
.banner .inner-banner h1 {
font-size: 3rem;
color: #495371;
}
.banner .inner-banner h2 {
font-size: 1.5rem;
color: #74959A;
}

#servicos {
margin: 80px;
}
#servicos h4 {
font-size: 1.3043478261rem;
color: #74959A;
text-transform: uppercase;
font-weight: 300;
text-align: center;
}
#servicos h3 {
text-align: center;
font-size: 2.3076923077rem;
margin-bottom: 80px;
font-weight: 300;
}
#servicos .cards {
display: flex;
justify-content: space-evenly;
}
#servicos .cards .card {
width: 360px;
text-align: center;
}
#servicos .cards .card h5 {
font-size: 2rem;
font-weight: 300;
margin-top: 25px;
margin-bottom: 20px;
color: #495371;
}
#servicos .cards .card p {
font-size: 1rem;
font-weight: 300;
color: #495371;
line-height: 1.25rem;
}
#servicos .cards .card .img-container {
padding-bottom: 2px;
border-bottom: 6px solid #74959A;
}
#servicos .cards .card .img-container img {
max-width: 100%;
}

#cupom {
background-color: #F1E0AC;
padding: 4rem;
text-align: center;
}
#cupom .texto {
color: #495371;
}
#cupom .texto h2 {
margin: 2rem;
font-size: 1.7647058824rem;
}
#cupom .input {
margin: 0 auto;
width: 575px;
border-radius: 20px;
border: 4px solid white;
background: white;
}
#cupom .input input {
border-radius: 20px;
height: 40px;
border: none;
width: 540px;
outline: none;
text-align: center;
font-size: 26px;
}
#cupom .input:hover, #cupom .input:focus-within {
box-shadow: 1px 1px 8px 1px #495371;
outline: none;
}
#cupom button {
text-transform: uppercase;
margin-top: 0.75rem;
outline: none;
height: 40px;
text-align: center;
width: 130px;
background-color: #495371;
color: #74959A;
letter-spacing: 1px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
border: 2px #495371;
border-radius: 40px;
}
#cupom button:hover {
color: #495371;
background-color: #74959A;
border-color: #F1E0AC;
}

@import styles/abstract/_variaveis.scss {}
footer {
text-align: center;
font-size: 1.5rem;
border-top: 2px solid #495371;
margin-top: 1rem;
padding: 1.2rem;
}
footer i {
color: red;
}

footer
text-align: center
font-size: $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: red

Olá, estou atrasado mas achei uma solução. No linear-gradient, ao invés de usar to-left, use graus:

background: linear-gradient(270deg, $colors)