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?

Mario e seu bigode

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.

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.

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.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.