Pré-processador SASS

Variáveis

    $variableName: value;

• Para adicionar uma variável

Imports

    @import "fileName";
    

• Para importar arquivos, nota: criar arquivos com _ antes do nome _base para o sass não compilar

Encadeiamento

    
    
    .container {

        $text-color2: rgb(0, 17, 255);

        color: white;

        p {
            color: $text-color2;
        }
    }

• Acessa os elementos filhos por meio de encadeiamento

Parece função, mas não é

    
    @mixin nomeDaFunção(){
        propriedade: value;
    }
        

• Declarar um bloco de código para uso futuro

    
    @include propriedade();
        

• Utilizar o bloco de código criado acima em um determinado elemento

Condicionais

    
    @mixin nomeDaFunção($val){
    @if $val == danger {
        color: red;
    }
    @else if $val == alert {
        color: yellow;
    }
    @else{
        color: black;
    }
}
        

• Se determinada condição bater, faz algo

Repetições

    
    @for $i from 1 through 5 {
    .text-#{$i} {
        font-size: 15px * $i;
    }
}
        

• Passa por cada elemento do html criando uma classe com número do index

    
    $colors: (color01: blue, color02: red, color03: green);

    @each $key, $color in $colors {
        .#{$color}-text { color: $color;}
    }
       

    
    $colors: (blue, red, green);

    @each $color in $colors {
        .#{$color}-text { color: $color;}
    }
       

    

    @each $color in (blue, red, green) {
        .#{$color}-text { color: $color;}
    }
       

• Os 3 modos estão corretos. Adiciona uma cor específica para cada posição no index

Herança

    
    
    .flex {
        display: flex;
        justify-content:center;
        align-items: center;
    }
    
    
    body{
        @extends .flex;
    }
       

• @extends herda todos os atributos do elemento criado

Referenciar

    
    p{
        color: white;
        &:hover{
            color: red;
        }
    }
       

• Sempre que for usar algum hover usar o & antes para referenciar