entendi como funciona o mixins, e entendi como funcina a function, porém o exemplo que foi dado no vídeo para criar uma função, me pareceu que eu poderia usar o mixins que daria o mesmo resultado.
entendi como funciona o mixins, e entendi como funcina a function, porém o exemplo que foi dado no vídeo para criar uma função, me pareceu que eu poderia usar o mixins que daria o mesmo resultado.
Olá, Geraldo, como vai?
A diferença entre @mixin e @function no SASS está no propósito e no comportamento de cada um.
O mixin serve para reutilizar blocos de código CSS. Ele insere estilos completos no local onde é chamado, sendo ideal para propriedades ou regras CSS repetitivas. Por exemplo:
@mixin botao($cor-fundo, $cor-texto) {
background-color: $cor-fundo;
color: $cor-texto;
padding: 10px 20px;
border-radius: 5px;
border: none;
}
.botao-primario {
@include botao(#3498db, #fff);
}
.botao-secundario {
@include botao(#2ecc71, #fff);
}
Já as functions são usadas para realizar cálculos ou retornar valores (como uma função em linguagens de programação), sem adicionar diretamente regras CSS. Ideal para retornar valores como tamanhos, cores ou cálculos complexos. Por exemplo:
@function calcular-rem($tamanho-px) {
@return $tamanho-px / 16 * 1rem;
}
.paragrafo {
font-size: calcular-rem(18); // Resultado: 1.125rem
}
.titulo {
font-size: calcular-rem(32); // Resultado: 2rem
}
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)