Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass

Apresentando o Bourbon: Mixins Leves em Sass e Mais

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
A Taste of Bourbon’s Delicious Mixins

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Bourbon é uma biblioteca top de mixins em Sass para designers. Ela tem uma abordagem mínima e série em relação a código de qualidade, importando-se com semântica. A biblioteca Bourbon também encoraja as melhores práticas para código escalável.

Uma Rápida Apresentação

Na verdade, além de ser apenas uma biblioteca, Bourbon é hoje uma pequeno conjunto de projetos que são montidos pelos designers da thoughbot. Nos próximos tutoriais, cobriremos os tópicos a seguir em detalhes:

Por hora, eis a essência:

Bourbon provê, principalmente, uma pequeno porém belo conjunto de mixins e funções extraídos de códigos Sass de vários designers. A ideia foi centralizar mixins úteis e evitar reinventar a roda o tempo todo.

Neat é um framework leve de grade para Sass. Tem o Bourbon como base e nasceu pela necessidade de uma abordagem semântica para layouts de sites.

Refills é uma coleção de padrões de design, bem estilizados ou não. Também são projetados com Bourbon e Neat. Códigos exemplos úteis estão ao nosso dispor.

Bitters são estilos base, variáveis e um pouco de estrutura para novos projetos em Bourbon. Para agilizar o máximo.

Bourbon: Biblioteca de Mixins para Sass

O Bourbon original foi lançado em 2011 por Philip LaPier, na época designer de producto digital na thoughbot. O projeto começou centralizando vários mixins de vários designers da empresa.

Hoje, Bourbon é uma biblioteca top de Sass para designers. Com abordagem minimalista e séria sobre código de qualidade que se importa com semântica. Gostamos, especialmente, por encorajar as melhores práticas para desenvolver ótimo código que escala.

Essa gem ajuda designers a escrever código mais rápido e lida com os por menores (como prefixos). As mixins geralmente agem como envólucros retornando CSS de qualidade, mas mantem-se o mais cru possível, usando o máximo da sintaxe CSS original.

Destaques

  • Bourbon é Sass puro e agnóstico de plataforma, e funciona com qualquer projeto Sass.
  • É bem próximo da sintaxe CSS padrão.
  • Não é atrelado à Ruby (diferente da Compass).
  • Bourbon inclui funções excelentes
  • Terceiriza prefixos de fabricantes.
  • É super leve.
  • É semântica.

Configuração

Ótimo, vamos começar! No terminal, acessemos o diretório do projeto e instalemos Bourbon via RubyGems:

Nota: Se não se sentir confortável com a linha de comando, recomendamos a série A Linha de Comando para Web Design.

Acesse a pasta das folhas de estilo do projeto e gere o diretório do bourbon.

Esse comando gera esse diretório contendo as unções, mixins, helpers e configurações que precisamos. Recomendamos não mexer nele. Será muito mais suave atualizar Bourbon dessa forma no futuro.

file

Finalizemos importando os arquivos Sass gerados nas folhas de estilo. Importemos Bourbon no topo do arquivo application.sass e garantamos que as outras importações venham depois:

Em application.sass:

Visão Geral das Mixins do Bourbon

Bourbon tem várias mixins úteis para acelerar o trabalho. Em relação a design, é seguro dizer que os criadores querem dar suporte às nossas próprias decisões sem forças estilos próprios sobre nós. Somos encorajados a criar nossas próprias coisas, usando essas mixins como uma base relativamente neutra.

Eis alguns que recomendamos a visualiação:

  • background-image
  • linear-gradient
  • border-radius
  • retina-image
  • inline-block
  • transitions
  • box-sizing
  • animations
  • font-face
  • triangle
  • clearfix
  • position
  • button
  • size

Aprenderemos mais sobre mixins em particul em tutoriais futuros.

Visão Geral das Funções de Bourbon

Sass já tem inúmers funções embutidas. Desde a manipulação de cadeia de caracteres à lidar com opacidade e cores. Bourbon traz alguns aprimoramentos selecionados e provê funções Sass muito úteis para vários casos de uso. Comecemos vendo essa seleção:

  • linear-gradient()
  • modular-scale()
  • golden-ratio()
  • shade()
  • tint()
  • em()

De novo, veremos mais detalhes das funções do Bourbon mais na frente na série.

Adicionais do Bourbon

Bourbon define algumas poucas mas úteis variáveis padrões, por exemplo:

Variáveis de Pilhas de Fontes

  • $lucida-grande
  • $monospace
  • $helvetica
  • $verdana
  • $georgia

Ao invés do modo tradicionais de definir pilhas de fontes:

com Bourbon podemos usar uma das variáveis:

Variáveis Temporais

Bourbon provê varias variáveis de tempos, nativamente. Uma mixin como transition tem a sintaxe a seguir:

O último parâmetro define seu tempo por uma variável. Podemos melhorar o comportamento transicional, porvendo uma das 24 variáveis de controle temporal. O GIF abaixo ilustra as opções:

file

Conclusão

Faça um favor ao seu eu do futuro e de seus colegar e dê uma chance a Bourbon. Essa gem valoriza muito código semântico ao mesmo tempo que é leve e simples. Ela servirá bem nosso design e arquitetura CSs, além de ajudar a cultivar boas práticas de criação de código excelente.

Junte-se a nós na próxima parte da série, onde iremos mais a fundo nas mixins da Bourbon.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.