SASS

[carlos-hfc]

O SASS é uma linguagem de folha de estilo compilada em CSS. Ele permite que você use variáveis, repetições, condições, funções e muito mais, tudo com uma sintaxe totalmente compatível com CSS. O SASS ajuda a manter grandes folhas de estilo bem organizadas e facilita o compartilhamento de design dentro e entre projetos.

Variáveis

Pense nas variáveis como uma maneira de armazenar as informações que você deseja reutilizar em toda a filha de estilo. Você pode armazenar cores, fontes ou qualquer valor CSS que for reutilizar. No SASS, usamos o $ para transformar algo em variável.

CSS possui variáveis próprias, totalmente diferente das variáveis SASS.

• Variáveis SASS são compiladas. Variáveis CSS estão incluídas na saída CSS.
• Variáveis CSS podem ter valores diferentes para elementos diferentes, mas as variáveis SASS têm apenas um valor por vez.
• Variáveis SASS são imperativas, o que significa que se usar uma variável e depois alterar seu valor, o uso anterior permanecerá o mesmo. No CSS, elas são declarativas, alterando o valor, afetará o uso de todo o escopo.

$variable: 10px;
.rule-1 {
   value: $variable;
}
$variable: 20px;
.rule-2 {
   value: $variable;
}

.rule-1 {
   value: 10px;
}

.rule-2 {
   value: 20px;
}

Escopo

Variáveis declaradas no nível superior são globais. Ou seja, podem ser acessados em qualquer lugar após serem declaradas. Mas isso não é verdade para todas as variáveis. Aquelas declaradas em blocos são geralmente locais e só podem ser acessados dentro do bloco.

$global: #000;

.content {
   $local: #fff;
   color: $global;
   background: $local;
}

.main {
   background: $global;
}

.content {
   color: #000;
   background: #fff;
}

.main {
   background: #000;
}