dúvida sobre o Mixin | SASS com Vite: otimizando e modularizando seu CSS

observe o seguinte caso:

@mixin flexbox ($direction: column, $align: center, $justfy: center){
    display: flex;
    flex-direction: $direction;
    align-itens: $align;
    justfy-content: $justfy;
}

eu tenho o seguinte bloco com apenas duas propriedades e eu não quero mais do que isso:

body{
    display: flex;
    flex-direction: column;
}

se eu usar o mixin aqui, ele vai receber todas as propriedades do mixin ja que elas tem um padrão ja estabelecido, ou apenas receberão o display:flex e o flex direction que eu passei?

body{
    @include mixin.flexbox(direction: column)
}

se elas recebem todos as propriedades do mixin, teria como eu bloquear o que eu não quero? porque muitas vezes eu não vou querer todas as propriedades e não me parece muito legal eu ter que criar diferentes mixin porque derrepente eu não quero uma propriedade de um ou de outro, pois assim eu novamente cairia no problema de código repetido.

Olá, Geraldo, como vai?

Sua dúvida é muito interessante e toca em um ponto importante sobre a flexibilidade e reutilização de mixins no SASS. Quando você utiliza um @mixin, todas as propriedades definidas nele serão aplicadas no elemento onde for incluído, mesmo aquelas que possuem valores padrão.

Para evitar que certas propriedades sejam aplicadas, você pode reestruturar seu @mixin usando condições para incluir apenas as propriedades desejadas (o que seria mais verboso) ou usar os valores iniciais (ou "default") das propriedades no @mixin como uma solução simples para evitar que elas sejam aplicadas quando você não as quiser. Isso funciona bem porque, no CSS, quando uma propriedade não é declarada, o navegador utiliza o valor padrão dela. Por exemplo:

@mixin flexbox($direction: row, $align: normal, $justify: normal) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
}

Dessa forma align-items: normal; e justify-content: normal; serão usados quando nenhum valor específico for passado, já que esses são os valores padrão para essas propriedades.

Ao incluir o @mixin, você pode especificar apenas o que deseja alterar:

body {
  @include flexbox($direction: column);
}

Resultado no CSS:

body {
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: normal;
}

Essa abordagem é eficaz em muitos casos porque reduz a necessidade de criar mixins mais complexos ou condicionais. Mas se quiser aprender mais sobre condicionais, você pode dar uma olhada na documentação. Está em inglês, mas usando o recurso de tradução que os navegadores normalmente possuem, fica bem fácil compreender!

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