Em projetos reais, muitos estilos se repetem: bordas arredondadas, sombras, botões, cards, estados de foco.

Os mixins existem para transformar esses padrões em blocos reutilizáveis.

O problema da repetição

Sem SCSS, repetir estilos é comum: 

 .card { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.modal {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

Se o padrão muda, você precisa alterar em vários lugares.

Repetição é inimiga da manutenção.

O que é um mixin?

Um mixin é um bloco de estilos reutilizável.

Você define uma vez e inclui onde quiser. 

 @mixin card-style { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

Usando um mixin

Para aplicar um mixin, usamos @include. 

 .card { @include card-style; }

.modal {
@include card-style;
}

O CSS gerado terá os estilos completos em cada classe.

Mixins com parâmetros

Mixins podem receber valores dinâmicos. 

 @mixin border-radius($radius) { border-radius: $radius; }

Uso: 

 .card { @include border-radius(8px); }

.button {
@include border-radius(4px);
}
Parâmetros tornam o mixin flexível sem perder padrão.

Valores padrão em mixins

Você pode definir valores padrão para os parâmetros. 

 @mixin shadow($blur: 12px) { box-shadow: 0 4px $blur rgba(0,0,0,0.1); }

Assim, o uso pode ser simples ou personalizado.

Mixins para estados e interações

Mixins são ótimos para padrões de interação. 

 @mixin hover-highlight { &:hover { background-color: rgba(66,139,202,0.1); } }

Uso: 

 .card { @include hover-highlight; }

Onde guardar os mixins?

Em projetos organizados, os mixins ficam em um partial próprio. 

 scss/ ├── _variables.scss ├── _mixins.scss ├── _buttons.scss └── style.scss

E são importados no arquivo principal.

Mixins vs classes utilitárias

Diferença importante:

  • Mixin → reaproveitamento no código
  • Classe → reaproveitamento no HTML
Mixins ajudam quem escreve CSS, não quem escreve HTML.

Cuidado: mixins demais

Usar mixins em excesso pode gerar:

  • CSS final maior
  • Dificuldade de leitura
Crie mixins apenas para padrões reais e repetidos.

💾🧠 Resumo da aula para nunca mais esquecer

  • Mixins evitam repetição de código
  • São blocos reutilizáveis de estilo
  • Podem receber parâmetros
  • Ajudam a manter consistência visual
  • Devem ser usados com moderação

Na próxima e última aula, vamos ver o fluxo real de trabalho — como escrever SCSS e gerar o CSS final 🌿⚙️

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.