SASS

Segundo a wikipedia (link), Sass (em inglês, “syntactically awesome stylesheets”, ou “folhas de estilo sintaticamente incríveis”) é uma linguagem de script que é interpretada ou compilada em Cascading Style Sheets (CSS).

As principais vantagens de se usar o Sass, são: Variáveis, Herança, Aninhamento, Loops e Mixins.

Variáveis:

Assim como no javascript ou em algumas linguagens de programação. Você pode criar variáveis dentro do Sass usando o caractere “$” para identificá-la.

Sass

$background: "#FFF";
body{
    background-color: $background;
}

Css

body{
     background-color: #FFF;
}

Herança:

Este é um dos recursos mais úteis do Sass. O uso do @extend permite compartilhar um conjunto de propriedades CSS de um seletor para outro. Isso ajuda a manter seu Sass muito enxuto.

Sass

.botao{
     border-color: 2px solid #ccc;
     background-color: #fefefe;
     color: #333;
}
.error{
     @extend .button; 
     border-color: red;
}

Css

.botao, .error{
    border-color: 2px solid #ccc;
    background-color: #fefefe;
    color: #333;
}
.error{
    border-color: red;
}

Aninhamento

Este recurso é super útil para o desenvolvimento de componentes e também de páginas com personalização específicas.

Sass

.accordion{
    border: 1px solid #555;
    font-size: 14px;
    color: #333;
    
    &-header{
        background: #CCC;
    }
    &-body{
        background: #FFF;
    }
    &.is-primary{
        border-color: #2b7ace;
        .accordion-header{
            background: #2b7ace;
            color: #FFF;
         }
    }
}

 Css

.accordion {
    border: 1px solid #555;
    font-size: 14px;
    color: #333;
}
.accordion-header {
    background: #CCC;
}
.accordion-body {
    background: #FFF;
}
.accordion.is-primary {
    border-color: #2b7ace;
}
.accordion.is-primary .accordion-header {
    background: #2b7ace;
    color: #FFF;
}

Loops

O Sass suporta os loops @each, @for e @while. Como nosso foco aqui é dar uma introdução básica às funcionalidades do Sass, vamos mostrar somente o loop @each.

Usando o exemplo do componente “.accordion” que vimos na sessão “aninhamento”, vamos supor que você precise renderizar esse componente usando as cores do nosso tema default (.is-primary, .is-success, .is-danger, etc…). Vamos usar um loop @each para criar as classes correspondentes para cada cor.

Sass

$cores:(
    default: #ccc,
    primary: #2b7ace,
    success: #7abf00
);
.accordion{
    border: 1px solid #555;
    font-size: 14px;
    color: #333;
    @each $key, $value in $cores {
        &.is-#{$key}{
            .accordion-header{
                background-color: $value;
                color: #FFF;
            }
        }
    }
}

Css

.accordion {
    border: 1px solid #555;
    font-size: 14px;
    color: #333;
}
.accordion.is-default .accordion-header {
    background-color: #cccccc;
    color: #FFF;
}
.accordion.is-primary .accordion-header {
    background-color: #2b7ace;
    color: #FFF;
}
.accordion.is-success .accordion-header {
    background-color: #7abf00;
    color: #FFF;
}

Mixins

Os mixins funcionam com o comportamento semelhante a funções, você pode utilizá-la para otimizar aqueles trechos de código que ficam replicados no seu código.

Sass

@mixin sprite($posX:0, $posY: 0){
    background-image: url(sprite.jpg);
    background-repeat: no-repeat;
    background-position: $posX $posY;
}
.user-avatar{
    @include sprite(-20px, 0);
} 

Css

.user-avatar{
    background-image: url(sprite.jpg);
    background-repeat: no-repeat;
    background-position: -20px 0;
}