Introdução a linguagem Sass

Introdução e revisão da linguagem Sass, com base nos meus planos de estudo para 2016.

Introdução

Este tutorial não tem uma introdução detalhada, pois aqui no blog tem um post antigo de introdução ao Sass, bem completo. A intenção deste post é apenas seguir o plano de estudos estipulado no Stay Updated Plan 2016, onde pretendo revisar as funcionalidades e recursos da linguagem.

Nesta primeira parte do tutorial, vamos analisar os recursos básicos do Sass e a sintaxe utilizada para declarar estilos.

Obs: Todos os exemplos são executado com o arquivo no formato .scss, e não .sass.

Sintaxe

Vamos dar uma olhada na sintaxe utilizada para declarar estilos na linguagem Sass.

Comentários

Código sass/scss

/* esse tipo de comentário é compilado para arquivo CSS.
// este tipo de comentário não é compilado e fica apenas no arquivo Sass/SCSS.
/*
* comentário
* multi
* linhas
*/

Output CSS

/* este tipo de comentário é compilado no arquivo css */
/*
* comentário
* multi
* linhas
*/

Mesclando/Nesting seletores de estilos

Nesting no Sass/SCSS basicamente se resume a incluir um seletor CSS dentro de outro seletor. Isso facilita e economiza muito tempo na hora de declarar os estilos.

Sass utiliza a indentação para criar a hierarquia/relevância entre os elementos, e quebra de linha para declarar cada propriedade. O SCSS utiliza o fechamento de cada estilo declarado e as propriedades não precisam ser declaradas cada uma, em uma linha.

Código sass/scss

p {
    margin-bottom: 1.3em;
    color: #666;    
    a {
        color: crimson;
    }
}

Output CSS

Output CSS

p {
  margin-bottom: 1.3em;
  color: #666;
}

p a {
  color: crimson;
}


Exemplo com seletores

Código sass/scss

a {
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
    &.qualquerclass {
        text-decoration: underline;
    }
    &#qualquerID {
        text-decoration: underline;
    }
    &-filho {
        text-decoration: underline;
    }
}

Output CSS

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.qualquerclass {
  text-decoration: underline;
}
a#qualquerID {
  text-decoration: underline;
}
a-filho {
  text-decoration: underline;
}

Outro exemplo com seletores

Código sass/scss

#demo {
// o & basicamente replica o elemento pai
    margin: .5em;
    //cria novo seletor #demo-filho
    &-filho {
        margin: .5em;
    }
    //cria novo seletor #demofilho
    &filho {
        margin: .5em;
    }
    //cria estilo especifico para o elemento #demo com a class .filho - #demo.filho
    &.filho {
        margin: .5em;
    }
    //determina o estilo aplicado para o elemento com a class .filho que tem o elemento pai com o ID #demo
    & .filho {
        margin: .5em;
    }
    //O > significa que estilo declarado vai ser aplicado apenas no primeiro elemento filho (se tiver três tags a, apenas a primeira será afetada).
    > p {
        a {
            color: #424242;
        }
    }
}

Output CSS

#demo {
  margin: .5em;
}

#demo-filho {
  margin: .5em;
}

#demofilho {
  margin: .5em;
}

#demo.filho {
  margin: .5em;
}

#demo .filho {
  margin: .5em;
}

#demo > p a {
  color: #424242;
}

Variáveis

Na linguagem Sass, utilizamos variáveis para replicar o mesmo valor em diversas propriedades de estilo. Imagine que temos uma cor base para o layout. Podemos declarar o seguinte estilo.

Código sass/scss

$color-base: #424242;
$text-pattern-font-family: Tahoma, sans-serif;

Nota: as variáveis em si não são compiladas, seu valor que é utilizado para operações, mas simplesmente declarar uma variável com algum valor não via alterar o arquivo de estilo gerado, até que o valor da variável criada seja utilizado em alguma propriedade.

O simbolo $ determina que o item color-base é uma variável com o valor #424242. Podemos utiliza-la da seguinte maneira.

Código sass/scss

$color-base: #424242;
$text-pattern-font-family: Tahoma, sans-serif;

Output CSS

body {
    background-color: #424242;
    font-family: Tahoma, sans-serif;
}

Se você não está entendendo a praticidade deste recurso, imagine que uma página tem uma cor base azul, e você precisa mudar o tom da cor. Com esse recurso, você precisaria apenas alterar uma linha de código, que seria o valor da variável, e todo código com a cor base azul seria alterado e compilado com a alteração em questão de segundos.

O valor declarado nas variáveis ficam disponíveis apenas para os elementos abaixo de seu seletor. Assim, as variáveis declaradas no inicio do arquivo, como no nosso exemplo, ficam disponíveis para utilização em qualquer propriedade de qualquer elemento. Porém, reitero, se a variável é declarada dentro de algum seletor, o valor desta fica disponível apenas para os elementos abaixo deste seletor.

Caso você deseje declarar o valor de uma variável fora de seu seletor, você vai se deparar com erro de valor não encontrado, porque o compilador primeiro precisa ler o valor da variável, para depois aplicar este.

Agora se a intenção, por algum motivo, é declarar a variável dentro de um seletor, e utilizar ela globalmente, você fazer como no exemplo a seguir.

Código sass/scss

body {
    @body-color-base: #424242 !global;
}

Dessa maneira o valor fica disponível globalmente e a variável pode ser utilizada em qualquer parte do arquivo.


Interpolando variáveis

As informações nas variáveis também podem ser utilizadas junto ao seletores e propriedades de estilo, para auxiliar na criação de classes, por exemplo, com a técnica de interpolação de variáveis.

Imagine que você deseja utilizar uma variável para facilitar a declaração de uma série de estilos relacionados a um elemento widget. Podemos fazer o seguinte:

//declaramos a variável com o valor que desejamos reutilizar
$variavel: "widget";

Agora, para todo estilo que precisar ser declarado para o elemento widget, podemos declarar da seguinte maneira:

Código sass/scss

.elemento-#{$variavel}
.btn-#{$variavel}
.sidebar-#{$variavel}

Output CSS

.elemento-widget
.btn-widget
.sideber-widget

O recurso #{ } determina a interpolação da variável, que basicamente disponibiliza o valor da mesma, ao compilar o código.

Uma propriedade content, por exemplo, não entende a declaração de variáveis. Vamos analisar o exemplo abaixo:

:before {
	content: "$variavel";
}

Esse código vai ser compilado exatamente da mesma maneira que está descrito acima, porém o compilador não retorna o valor da variável, pois entende que este é um valor em texto. Com a interpolação, podemos declarar o código da seguinte maneira:

Código sass/scss

:before {
	content: " #{$variavel} ";
}

Output CSS

:before {
	content: "valor da variável";
}

Com a interpolação na propriedade content, é possível retornar o valor da própria variável, ao invés da informação na string.

Essa técnica pode ser bem útil, ao criar um framework, por exemplo (criar diversos elementos com poucas divergências e um padrão).

Fim da primeira parte…

Vou finalizar aqui a primeira parte da revisão do Sass, para não juntar muita informação em apenas um post.


Nos próximos vamos dar uma olhada nos tipos de dados que podemos utilizar na linguagem Sass, como efetuar operações matemáticas e a importar arquivos externos.

Até a próxima, qualquer dúvida estou a disposição nos comentários.

🙂

  • Bernardo Gomes

    Muito show o tutorial

  • Adilson Calixto Dos Santos

    Show sua postagem amigão.