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?

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

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.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

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.

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.