Nesta aula, vamos aprender os dois recursos mais usados do SCSS e também os mais fáceis de amar: variáveis e nesting.

Eles não mudam o que o CSS faz — mudam como você escreve CSS.

Variáveis no SCSS

Variáveis permitem guardar valores para reutilizar depois.

No SCSS, variáveis começam com $. 

 $primary-color: #428bca; $border-radius: 8px; $spacing: 16px;

Esses valores podem ser usados em qualquer lugar do código.

Usando variáveis na prática

Sem variáveis, repetir valores é comum: 

 .card { border-radius: 8px; border: 1px solid #428bca; }

.button {
background-color: #428bca;
border-radius: 8px;
}

Com SCSS: 

 $primary-color: #428bca; $radius: 8px;

.card {
border-radius: $radius;
border: 1px solid $primary-color;
}

.button {
background-color: $primary-color;
border-radius: $radius;
}
Alterar um valor em um único lugar é o maior ganho das variáveis.

O que faz sentido virar variável?

  • Cores principais
  • Espaçamentos recorrentes
  • Tamanhos de fonte
  • Border-radius padrão
Não transforme tudo em variável. Use para padrões, não exceções.

Nesting (aninhamento)

Nesting permite escrever seletores dentro de outros seletores, refletindo a estrutura do HTML.

Em CSS puro: 

 .card h3 { margin-bottom: 8px; }

.card p {
font-size: 14px;
}

Em SCSS: 

 .card { h3 { margin-bottom: 8px; }

p {
font-size: 14px;
}
}

O resultado final em CSS será exatamente o mesmo.

Nesting melhora a legibilidade

Com nesting, fica mais fácil entender:

  • Qual estilo pertence a qual componente
  • A hierarquia dos elementos
Nesting aproxima o CSS da estrutura mental do HTML.

Cuidado com nesting excessivo

Um erro comum é exagerar no aninhamento. 

 /* Evite */ .card { .content { ul { li { a { color: red; } } } } }
Nesting profundo gera CSS frágil e difícil de manter.

Boa regra prática:

  • Até 2 ou 3 níveis, no máximo

O seletor &

O & representa o seletor pai.

Muito usado para estados como :hover. 

 .button { background-color: $primary-color;

&:hover {
background-color: darken($primary-color, 10%);
}
}

Isso gera um CSS limpo e previsível.

Variáveis + nesting juntos

É aqui que o SCSS começa a mostrar seu valor real. 

 $primary-color: #428bca;

.card {
border: 1px solid $primary-color;

h3 {
color: $primary-color;
}
}
Código mais curto, mais claro e mais fácil de manter.

💾🧠 Resumo da aula para nunca mais esquecer

  • Variáveis guardam valores reutilizáveis
  • Elas evitam repetição e facilitam manutenção
  • Nesting organiza seletores por componente
  • O seletor & representa o pai
  • Evite nesting profundo demais

Na próxima aula, vamos aprender a organizar projetos reais com SCSS usando partials e imports 🌿📁

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?

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.