Conheça o SASS – Pré processador de CSS incrível

Olá pessoal, tudo bem ? Nesse post vou mostrar uma ferramenta que ajudou a agilizar bastante o meu processo de criação e desenvolvimento. O SASS ou SCSS é uma forma diferente e prática de escrever CSS (Folha de estilo).

Minha vida antes do SASS / SCSS

Como eu falei no post sobre Grunt JS (VEJA AQUI). Agilidade na hora de programar ajuda muito a entregar um projeto com qualidade e dentro do prazo. Tendo isso em mente eu comecei a pesquisar ferramentas que agilizassem todos os meus processo. Durante algum tempo eu usei o CSS puro. Era muito ruim ! Eu criava um documento CSS único que muitas vezes ficava bagunçado com todas as minhas classes espalhadas. Para dar manutenção era mais complicado ainda, se eu precisasse modificar o header, eu precisava achar exatamente a linha de código e editar. Na correria eu quase sempre optava por colocar a atualização no fim do documento CSS com vários “!importants”.

O que mudou usando SASS / SCSS ?

Conscientização

O SASS me proporcionou separar meus projetos em documentos distintos. Por exemplo: Antigamente com CSS eu fazia um comentário e abaixo dele começava a fazer minha estilização. Agora imagina fazer isso para o header, footer, main, sidebar etc… O código vai ficar enorme e pouco organizado. Com SASS / scss é possível dividir tudo isso em arquivos diferentes. Dessa forma você tem apenas um arquivo para o header, um arquivo para o footer, para sidebar etc…

Código mais limpo

Eu não sei vocês mas uma coisa que sempre me deixar irritado quando escrevo css é ter que digitar a mesma coisa o tempo todo. Um exemplo básico.

<nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Contato</a></li>
        <li><a href="#">Sobre a empresa</a></li>
    </ul>
</nav>

Para fazer uma estilização em cada elemento eu teria que digitar a palavra #menu várias vezes. Por exemplo.

#menu { 
    width: 100%; 
} 

#menu > ul { 
    display: flex;
    justify-content: space-around;
 } 

#menu > ul > li > a{ 
    color: blue;
}

Com SASS / SCSS isso fica mais fácil. Você passa a seguir a mesma hierarquia do HTML.  Veja o mesmo código em SASS / SCSS.

#menu {
  width: 100%;
  & > ul {
    display: flex;
    justify-content: space-around;
    & > li > a {
      color: blue;
    }
  }
}

Muito mais fácil e de entender, né ?

Padronização

O SASS / SCSS permite a criação de variáveis e graças a isso a padronização de cores, fontes, textos ficou muito mais fácil ! Isso também está disponível no CSS porém não é tão simples como é no SASS / SCSS.

// ISSO É UMA VARIÁVEL
$BORDRE-COLOR: #bfbfbf;
$COLOR: green;
$FONT-BIG: 25px;
$FONT-MED: 18px;
$FONT-SMALL: 13px;
$TITEL-SIZE: 30px;
// FIM VARIÁVEL

//$nome-da-variável: valor;
.title {
  font-size: $TITEL-SIZE;
  color: $COLOR;
}
div.box {
  border: 1px solid $BORDRE-COLOR;
} // etc...

Mixin

Vamos supor que você trabalhe para um empresa de desenvolvimento. Lá você precisa sempre está escrevendo o estilo do header. Porém você já notou um padrão no header mobile. Quase sempre é Menu barrinhas na lateral, logo no meio e uma opção de configuração, sing up no outro canto. Você pode escrever um mixin só para o header mobile. Mixin são funções que ao invés de retornar um valor retorna todos o css configurado.

Abaixo, um exemplo de mixin bem simples

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

O retorno desse exemplo é

* html #logo {
  background-image: url(/logo.gif);
}

Extends

O Extend permite aplicar o estilo de uma classe em outra. Ou seja, ele estende uma classe para outra. Podemos tomar como exemplo uma mensagem de erro, em alguns casos pode ser que sua mensagem não fique tão clara e seja necessário aplicar um outro estilo para chamar mais a atenção. Nesse caso, podemos estender o estilo do erro e aplicar novos estilos a essa nova classe.

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  // EXEMPLO DE EXTEND
  border-width: 3px;
}

Usando condições if else

Isso é muito prático para usar em ambiente de desenvolvimento. Você pode montar seu próprio ambiente de desenvolvimento e usando variáveis de ambiente você pode mostra um console ou não.

div.console {
  @if ($console) {
    display: block;
  } @else {
    display: none;
  }
}

Desse jeito você não precisa ficar com medo de subir algo errado para produção. =)

A partir do dia 20 será lançado 10 vídeos ensinando a utilizar diversas ferramenta para agilizar seu processo de desenvolvimento.