intro

$variavel: valorVariavel; possuem escopo

@import 'arquivo' || _arquivo.scss (importa o estilo no arquivo e o arquivo não é compilado, ou seja sem o import ele não é validado) Consegue encadear varios seletores. Exemplo .container { Color: white; P { Color: blue; } } Toda tag P dentro do container estará com a cor do texto azul. Gerando assim como se fosse um encapsulamento nos seletores.

@mixin e @include Mixin é uma função css que pode receber argumentos. @mixin function() {} || declara a função @include function() || chama a função

@if $bool == true {} || @else || @else if

@for i from 0 through 5 { || through vai até o 5 || "to" vai até o 4 .text-#{i} || para usar variavel no nome da classe }

$array: (chave1: valor, chave2: valor); || só precisa da chave no each caso tenha chave no array e ele pode ser criado sem

@each @key, $color in $colors {}

Existem funções nativas do sass

Documentação https://sass-lang.com/documentation

Consegue usar o @extend para puxar os valores de um outra seletor, como herança, como se transformasse um seletor em função.

Para fazer o :hover do mesmo seletor, é preciso referenciar o mesmo com o & "E comercial" como se o & tivesse a referencia do escopo. Exemplo A { &:hover{} }