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.
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);
}
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
Cuidado: mixins demais
Usar mixins em excesso pode gerar:
- CSS final maior
- Dificuldade de leitura
💾🧠 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.
Você Sabia?
PDP-1
O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.
Pac Man
Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.
Duck Hunt
Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".
Computadores de 1,5 tonelada
Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.
Galaxy Game
As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.










