Introdução ao SASS – Pré-processador CSS

Já ouviu falar em Sass? Neste post vamos analisar como interpretar essa linguagem e como ela pode nos beneficiar em relação a folhas de estilo CSS.

Introdução

Sass é uma nova forma de trabalhar com CSS, onde nos temos mais liberdade para tratar os estilos aplicando conceitos de programação OO. Ele utiliza a linguagem Ruby para interpretar seus arquivos .scss/.sass, ou compiladores instalados no sistema (Mac,Windows, Linux) para transformar o .scss/.sass em .css.

Importante: existem dois formatos de arquivos para o trabalhar com o padrão Sass, que são .scss e .sass. A diferença dos de um para o outro é que o scss preserva alguns padrões do CSS como fechar chaves para finalizar um estilo enquanto o Sass é super limpo, como no exemplo abaixo:

Sass:

#header
:background-color: black;

#menu
:background-color: black;

Scss:

#header {
   background-color: black;
}

#menu {
   background-color: black;
}

Duvidas em relação a instalação e configuração do Ruby? Dê uma olhada posts:

O sublime por padrão precisa ser configurado para reconhecer o padrão Sass/Scss, e isso pode ser feito com a instalação do respectivo pacote Sass no sublime. Duvidas em relação a como instalar um pacote no Sublime? Veja este tutorial:

Vamos apresentar algumas funções básicas do Sass para você entender como ele funciona e como é simples trabalhar com ele.

Comentários

Comentários em programação é quase que uma coisa obrigatória e com folhas de estilo CSS não é diferente. No Sass também podemos fazer comentários, porém, de forma diferente do .css. Em Sass para comentar algo utilizamos //, enquanto em .css utilizamos /* */. Podemos utilizar os dois métodos, porém o método do Sass não será compilado quando você atualizar seu arquivo, somente comentários no padrão .css. Assim você tem total liberdade para explicar seu CSS de forma que faça sentido no arquivo Sass, e depois que ele for compilado, mesmo que ele apresente seu código para qualquer pessoa que clicar em exibir código-fonte, não vai constar nenhuma referência do programador, somente o estilo compilado. Exemplo:

// esse é um comentario em scss.
// você não precisa mostrar a todos as referências da sua folha de estilo.
// notas importantes guardamos para os desenvolvedores envolvidos.

/*
Esse é o método padrão de comentario em css e que é compilado e apresentado no arquivo final.-
*/

html {
    font-size: (12 / 16) * 1em;
}

Unindo seletores

Vamos analisar agora uma das funções inovadoras do Sass que é a abilidade de unir seletores sem a necessidade de repetir o código acima, como é feito para declarar um estilo por exemplo dentro da tag <p> que está associada a uma <div> de classe .container.

Vamos analisar um exemplo em CSS:

.fonte {
  background: orange; }
  .fonte p {
    color: blue;
    font-size: 14px;
    font-weight: bold; }

E agora o mesmo código em SCSS:

.fonte {
  background: orange;
  p {
    color: blue;
    font-size: 14px;
    font-weight: bold;
  }
}

Pra quem ta acostumado a utilizar CSS com várias classes vai achar esse método muito interessante, limpo e lógico. Vale notar que após o código ser compilado em CSS, vai constar a repetição das classes.

Unindo popriedades

Praticamente a mesma lógica da técnica acima porém para as propriedades das classes declaradas. Vamos analisar um exemplo para entender melhor.

CSS:

.fonte_titulo {
  font-family: arial;
  font-weight: bold;
  font-size: 2em; }

SCSS:

.fonte_titulo {
  font: {
    family: arial;
    weight: bold;
    size: 2em;
  }
}

Redefinindo o seletor pai por um seletor unido

Outro exemplo de exemplificação do código CSS com Sass pensando em produtivida.

CSS:

a {
  color: blue;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

SCSS:

a {
  color: blue;
  text-decoration: none;
  &amp;:hover {
    text-decoration: underline;
  }
}

Note que para declarar pseudo classes você não perde tempo reescrevendo o mesmo código, economizando tempo dentro da mesma logica dos exemplos anteriores.

Também podemos utilizar esse método para estender a classe de uma tag, como no exemplo abaixo.

CSS:

.fundo {
  background: orange; }
  .fundo.block {
    border: 1px solid; }

SCSS:

.fundo {
  background: orange;
  &amp;.block {
    border: 1px solid;
  }
}

Note que o Sass tenta sempre facilitar otimizando a declaração do código. Vamos analisar um exemplo mais complexo: digamos que você precisa declarar diferentes códigos com a mesma função para que o mesmo funcione em diferentes navegadores.

Agora veja como Sass facilita nossa vida.

CSS:

cssgradients .foo {
  background: -webkit-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%);
  background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%);
  background: linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%); }
.no-cssgradients .foo {
  background: #c9de96; }

SCSS:

.foo {
  .cssgradients &amp; {
    background: -webkit-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%);
    background: -moz-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%);
    background: linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%);
  }
  .no-cssgradients &amp; {
    background: #c9de96;
  }
}

Essa técnica pode ser aplicada não importando quantos levels de classes você tenha em uma função, como no caso abaixo.

SCSS:

.foo {
  awesome {
    .class {
      .amazing {
        .things {
          background: orange;
          .no-foo &amp; {
            background: green;
          }
        }
      }
    }
  }
}

Com isso obtemos o seguinte resultado em CSS:

.foo .awesome .class .amazing .things {
  background: orange; }
  .no-foo .foo .awesome .class .amazing .things {
    background: green; }

Como notamos nos exemplos acima, essa técnica tem diversas aplicações dentro da lógica estabelecida para ela. Otimize seu código para aprimorar seu conhecimento!

Utilizando variáveis – isso mesmo, variáveis!

Todo profissional de front-end sabe que a grande falha do CSS é a falta de capacidade de reutilizar o código CSS declarado.

Com Sass “burlamos” essa deficiência do CSS utilizando o conceito de variáveis, e dessa forma podemos reutilizarmos o código que quisermos e até mesmo pré estruturar o código se baseando em variáveis para elementos padrões.

Vamos analisar o seguinte exemplo:

CSS:

.box {
  border: 1px solid #ccc;
}

Essa linha de código vai se repetir toda vez que for necessário utilizar a mesma até que um dia o layout é alterado e você precisa trocar todas essas linhas declaradas pelo novo formato do layout. Observe o mesmo código em Sass utilizando o conceito de variáveis e veja como isso nem chega perto de parecer um problema.

SCSS:

$border-color: #ccc;

.box {
  border: 1px solid $border-color;
}

Matemática em Sass

Envolver matemática em CSS as vezes pode deixar o código um pouco confuso e difícil de entender. Existem muitas funções matemáticas em Sass, porém aqui vamos apresentar algumas que visam a produtividade que é o foco do Sass.

Analisemos a seguinte situação: você precisa declarar todas as fontes do seu site com a medida em para obter o tamanho ideia para cada tela com base no viewport. Para declarar esse código com o simples CSS precisaríamos primeiro efetuar algumas contas matemáticas simples para descobrir que valor dar àquele font-size porém em Sass podemos apenas declarar o seguinte:

SCSS:

html {
  font-size: (12 / 16) * 1em;
}

O código em CSS será compilado da seguinte maneira:

html {
  font-size: 0.75em; }

Ele faz o calculo pra gerar o resultado esperado, ou seja, podemos criar uma variável para converter px para em e quando precisarmos utilizar esta conversão, basta reutilizar á variável.

O mesmo conceito pode ser aplicado para converter qualquer medida, desde que haja lógica no calculo e na utilização do código, veja este exemplo para converter a medidas em porcentagem.

SCSS:

html {
  font-size: (12 / 16) * 100%;
}

CSS:

html {
  font-size: 75%;
}

Estendendo classes (Extend)

Com este método nos podemos criar uma nova regra de estilo, utilizando uma regra declarada anteriormente, alterando sua propriedade sem alterar sua regra. Ficou confuso? Vamos analisar o exemplo.

Regra: para estender uma classe a uma nova regra é necessário chamar a mesma com incluindo o comenado @extend nomedaclassemquestão;

SCSS:

// variaveis que vamos utilizar
$standard-border-color: gray;
$winning-border-color: green;

// classo que vamos reutilizar como exemplo
.user-dialog-box {
  border: 10px solid $standard-border-color;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

// classe semantica no DOM
.alert-winning-user {
  @extend .user-dialog-box;
  border-color: $winning-border-color;
}

CSS:

.user-dialog-box, .alert-winning-user {
  border: 10px solid gray;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }
.alert-winning-user {
border-color: green; }

Outra forma de executar a mesma função porém com um recurso do Sass 3.2 que se chama silent class.

Utilizando o exemplo anterior, podemos criar uma regra CSS normal porém ao invés de utilizar o . [ponto] no inicio da regra da classe, utilizamos o %. Vamos analisar o exemplo a seguir.

SCSS:

// variaves que vamos utilizar
$standard-border-color: gray;
$winning-border-color: green;

// nossa silent class para reuso
%standard-dialog-box {
  border: 10px solid $standard-border-color;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

// classe semantica no DOM
.user-notification {
  @extend %standard-dialog-box;
}

// classe semantica no DOM
.alert-winning-user {
  @extend .user-dialog-box;
  border-color: $winning-border-color;
}

No fim obtemos o seguinte arquivo CSS:

.user-notification, .alert-winning-user {
  border: 10px solid gray;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }

.alert-winning-user {
  border-color: green; }

Esse método é muito utilizado, principalmente como apresentado no primeiro exemplo, pela facilidade e pela otimização gerada ao declarar seu código.

Mixins

Esse método é muito parecido com a extensão de classes. É utilizado para criar conjunto de códigos reutilizaveis para ter um melhor controle do UI (interface do usuário). Um ótimo exemplo deste método é o modo com o Framework Foundation. A diferença entre as classes estendidas é que o Mixin utiliza argumentos.

Utilize uma combinação de declarações @mixins para definir um Mixin e depois utilize um @include para chamar este Mixin para uma classe que você mesmo declarou ajuda a criar classes inteligentes para reutilizar códigos já declarados.

Uma diferença que deve ser notada entre Mixins e Extend, é que quando declaramos um Mixin, ele não concatena os seletores que compartilham a mesma regra. O Mixin vai inserir as regras do Mixin declarado dentro do seletor toda vez que o mesmo for chamado.

Vamos analisar um exemplo para entender o seu funcionamento.

SCSS:

@mixin dialog-box($border-color) {
  border: 10px solid $border-color;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.alert-winning-user {
  @include dialog-box(green);
}

CSS:

.alert-winning-user {
  border: 10px solid green;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }

E se você quiser utilizar um Mixin sem precisar sempre declarar um valor? Quando declaramos uma variável podemos utilizar para adicionar um valor default, como no exemplo abaixo.

SCSS:

@mixin dialog-box($border-color: gray) {
  border: 10px solid $border-color;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.alert-winning-user {
  @include dialog-box;
}

CSS:

.alert-winning-user {
  border: 10px solid gray;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }

Dessa forma podemos utilizar o @include sem precisar declarar um valor, pois no caso o valor chamado será o padrão declarado no Mixin. Caso você mesmo assim queira alterar o valor, basta no @include incluir o valor desejado e o mesmo é substituido como no exemplo anterior.

A principal utilização do Mixin se baseia na abilidade de criar código de reuso inteligentes sem a necessidade de mexer na regra padrão, somado a variáveis, da total controle das suas regras CSS desde que as mesmas estejam bem estruturadas no arquivo SCSS.

Conclusão

Como analisamos neste tutorial, o Sass ainda se mostra um pouco timido em relação a utilização por parte de desenvolvedores porém até as funções mais básicas dessa nova forma de tratar o CSS já é de grande valia para quem é programador web front-end ou quem trabalha com frameworks e elementos UI.

Qualquer duvida, encaminhe um comentário 🙂

  • killuawax

    Ótimo artigo! Como você estrutura suas pastas do SASS? Você também usa COMPASS?