Bourbon – biblioteca de mixins para Sass

Este post faz parte de uma série para apresentar o conjunto de ferramentas Bourbon | Neat | Bitters e Refills. Este primeiro post é uma introdução ao Bourbon.

Essa semana fiz alguns testes com o Bourbon, que é uma biblioteca com vários mixins úteis, prontos, para Sass. Pra quem está começando a utilizar Sass agora, essa biblioteca pode ser super útil e é isso que vamos analisar neste post.

Introdução

O Bourbon nada é mais que uma biblioteca (pode também ser considero um framework Sass) com uma série de Sass Mixins que nos apoiam no desenvolvimento e otimização do código. No desenvolvimento ele ajuda trazendo diversos mixins prontos por exemplo para determinar as fontes presentes na página, para bordas, tem suporte aos prefix css de diferentes navegadores, entre outros, muito úteis e que realmente agilizam o trabalho do desenvolvedor. A otimização fica por conta do Sass que compila o código para CSS de acordo com as mixins do Bourbon.

Site Doc GitHub

Se você não tem conhecimento do pré processador CSS, Sass, recomendo dar uma olhada nestes posts do blog primeiro:

O que são Mixins?

Os mixins permitem que você crie objetos com propriedades CSS para reutilizar em qualquer parte do website. Tem a mesma função de um template, trazer pronta funções básicas que estruturam aquele arquivo. O mixin fica interessante quando utilizamos seu método de importar propriedades por meio de um objeto

Exemplo:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Como utilizar

Para utilizar o Bourbon da maneira ideal é necessário estruturar os diretórios do projeto para trabalhar com arquivos Sass.

Para instalar configurar o Bourbon em seu projetos, você precisa ter a liguagem Ruby instalada em seu sistema operacional. Mac OS já tem a linguagem configurada nativamente, basta executar os comandos de instalação do Bourbon, para Windows e Linux é necessária configuração para então utilizar o Bourbon.

Após preparar o ambiente, execute o seguinte comando para instalar a gem do Bourbon:

gem install bourbon

Após instalar a gem, basta se dirigir até a pasta onde deseja colocar os arquivos do Bourbon e executar o seguinte comando:

bourbon install

Com isso será criada uma pasta chamada Bourbon com todos os arquivos necessários para a utilização da ferramenta.

Preparando Workflow

Vou compartilhar um método bem simples que eu utilizo que é separar os itens da pasta CSS com numeração e categoria. Exemplo:

  • Raiz
    • img
    • js
    • css
      • 0-plugins
        • plugins-dir.sass
      • 1-base
        • base-dir.sass
      • 2-modules
        • modules-dir.sass
      • 3-layouts
        • layouts-dir.sass
      • app.sass
    • index.html

Com essa estrutura de arquivos fica bem mais fácil trabalhar com pré processadores css em projetos grandes ou pequenos.

Primeiro, vá até o arquivo plugins-dir.sass e importe as configurações do Bourbon incluindo a seguinte linha de código no inicio do arquivo:

@import 'bourbon/bourbon'

Agora, basta importar os arquivos das pastas plugin, base, modules e layouts no arquivo app.sass. Exemplo:

@import '0-plugins/plugins-dir'
@import '1-base/base-dir'
@import '2-modules/modules-dir'
@import '3-layouts/layouts-dir'

Pronto, agora temos controle de todas as funcionalidades a partir de um único arquivo.

Para editar o layout da página index podemos utilizar o seguinte método: criar um arquivo index.sass na pasta layouts e importar este dentro do arquivo layouts-dir.sass para que ele entre na hierarquia de arquivos criada. A partir do arquivo index.sass que incluímos por exemplo todos os estilos da index.

Note que utilizando este processo apenas um arquivo CSS é criado no final, porém temos total controle de cada parte executada na estrutura do projeto.

Bom, agora que já criamos um workflow para o projeto, vamos fazer alguns testes práticos de utilização.

Testes práticos

Lembrando que para o teste você precisa ter um ambiente pronto para trabalhar com arquivos Sass, seja atrvés do terminal ou através de pré processadores desktop (Koala, LiveReload, Mixture, Prepros, Scout).

Font-family

Esse add-on facilita a forma como declaramos as as propriedades do font-family trazendo pronta algumas fontes padrões com fallback. Exemplo:

Sass

h1
  font-family: $helvetica
CSS Compilado

h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

No bourbon o objeto $helvetica tem as seguintes propriedades:

$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

Então na verdade, o Bourbon conta com uma séria de funções úteis, prontas, bastando declarar a mesma se houver necessidade e com total liberar para editar o source code. Vamos ver mais alguns exemplos interessantes.

Em

Este converte medidas em px para em com base no objeto $em-base. Exemplo:

Sass

.item
  font-size: em(12)
CSS Compilado

.item {
  font-size: 0.75em;
}

No bourbon o objeto $em tem as seguinte função:

@function em($pxval, $base: $em-base) {
  @if not unitless($pxval) {
      $pxval: strip-units($pxval);
  }
  @if not unitless($base) {
      $base: strip-units($base);
  }
  @return ($pxval / $base) * 1em;
}

Fiz os testes de utilização do Bourbon usando o Codio (pela facilidade de trabalhar com terminal), quem quiser acompanhar os testes este é o link:

Show me the Code at Codio

A documentação do Bourbon conta com uma extensa lista de Mixins, Functions, ADD-ONS e Settings (funções globais). A lista agrega desde funções básicas como conversão de medidas até animações com inclusão de prefix para diversos navegadores.

Conclusão

O mais interessante do Bourbon é que ele não faz nada para você de fato, ele facilita a forma como podemos fazer as coisas bem feitas sem fornecer nada pronto, e isso por um lado é bom (vide a utilização do Bootstrap por quem não sabe nem estilizar uma página).

Sobre o Bourbon é isso, ele até então não parece tão mágico assim, mas se utilizado em conjunto com as ferramentas de suporte Neat, Bitters e Refills conseguimos atingir grandes feitos, e é isso que vamos fazer nos próximos posts da série.

Qualquer dúvida estou a disposição nos comentários.

🙂

  • Wesley Covre

    Muito prático! ^^ E o melhor: como ele suporta LibSass (ao contrário do Compass), dá pra usar no Live Preview do Brackets (ou c/ o Takana, no Sublime, pra quem usa OS X ou Linux).

    Live Preview pode parecer luxo, mas pra quem ainda não é expert em CSS ou vai aprender a usar uma biblioteca nova, é ESSENCIAL.

    Uma coisa que chamou a minha atenção foi o seu workflow. Já li sobre modularização de CSS, mas sei bem pouco sobre como aplicar isso de forma prática. Vi esses tempos um método em que o autor separava o código por seção do HTML (nav.less, header.less, footer.less, etc), mais alguns arquivos p/ alterações universais (tags html, body, h1-h6, strong, em; main.less); estilização de elementos que não são restritos a determinada seção da página, como botões e outros elementos de UI (globals.less); e variáveis e mixins que ele criou e usa em todos os seus projetos (variables.less e mixins.less; http://www.helloerik.com/bootstrap-3-less-workflow-tutorial).

    A minha dúvida é: como o seu método se compararia ao descrito acima? Entendo que a sua opção pela divisão por pastas possa ser apenas por um questão de organização, mas por que a numeração no início de cada uma? Que tipo de código EXATAMENTE vai dentro de cada pasta?

    Seria muito interessante um post só sobre esse assunto.

    Obrigado pelo tutorial e pelas dicas… Continue compartilhando! 😀

    • Wesley, me desculpe a demora pra responder amigo, to muito sem tempo!! rs
      quando eu adotei essa metodologia foi só pra organizar melhor mesmo, a numeração é pra facilitar, em projetos grander chegam a ter mais de 20 pastas, ai o número ajuda muito, e dentro de cada, os estilos em Sass de cada página.
      mas esses dias, estava lendo uns artigos sobre atomic design, e parece ser muito mais inteligente a metodologia. não apliquei ainda mas vale a pena conhecer, foi esse post que vi: http://nomadev.com.br/atomic-design-por-que-usar/

    • ae wesley, da uma olhada nesse esquema: http://skyline.is/
      é uma solução pra essa sua questão! 🙂

      • Wesley Covre

        Legal! É exatamente isso que eu tava procurando, mas não sabia o nome do esquema (Arquitetura de CSS). Huahuahua

        Vlw! (y)