Advertisement
  1. Web Design
  2. Sass

Um Pouco das Deliciosas Mixins do Bourbon

by
Read Time:4 minsLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
Introducing Bourbon: Lightweight Sass Mixins and More
One for the Road: More Tasty Bourbon Mixins

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

Essa é a parte um de uma visão profunda das mixins úteis da Bourbon. Apresentaremos as mais importantes e explicaremos como usá-las na prática.

Lista de Guloseimas

Nesse tutorial veremos as seis mixins abaixo:

  • Mixin para Background Imagem
  • Mixin Para Linear Gradient
  • Mixin para Border Radius
  • Mixin de Box-Sizing
  • Mixing para Transition
  • Mixin para Font-Face

Os exemplos abaixo não representam as melhores práticas necessariamente, mas foram escolhidos por explorar as funcionalidades básicas das mixins.

Mixin para Background Image

Essa mixin cria a propriedade background-image com múltiplas imagens de planos de fundo (até dez) separadas por vírgula, gradientes lineares ou radiais.

Com Imagens:

HTML:

Sass:

filefilefile

Atenção! Veja a precedências das camadas. A primeira imagem será mostrada no topo. O mesmo vale para os gradientes.

Podemos usar a notação curta de background-image, assim:

Sass:

Com Gradientes:

Podemos usar a função linear-gradiente da Bourbon na mixin de background-image.

HTML:

Sass:

filefilefile

Mixin para Linear Gradient

Essa daqui recebe até dez paradas de cor e valores percentuais se quisermos ajustar a distribuição das cores.

HTML:

Sass:

filefilefile

Também podemos prover um primeiro argumento opicional para controlar a direção (em graus) do gradiente.

Sass

filefilefile

Mixin para Border Radius

Essa mixin bem útil facilita trabalhar os cantos da caixa em pares: topo, baixo, direita e esquerda. Se quisermos cantos arredondados e não quremos digitar muito, essa é nossa amiga.

HTML:

Sass:

filefilefile

Comparemos ambos gradientes e foquemos nossa atenção no inferior, que tem cantos arredondados súbtos de 3px. Muito arredondamento tornar designs engraçados. Sejamos simples!

Claro que podemos ser criativos com isso. Se pensarmos bem, conseguimos criar coisas legais com ele. Abaixo, temos alguns exemplos sem-sentido que servem para ilustrar as várias opções

Sass:

filefilefile

Sass:

filefilefile

Mixin para Box Sizing

Com essa mixin, podemos alterar o modelo da caixa de qualquer elemento. Temos três escolhas:

  • border-box
  • content-box
  • inherit

Sass:

Mixin para Transition

Vale falar logo: anexemos transition ao estado inicial do seletor (que será alterado ao passar o mouse) não na pseudo-classe!

HTML:

Sass

Estado inicial do elemento:

filefilefile

Ele então transita pelo período especificado. Aqui, 1.0s.

filefilefile

Eis o efeito da transição ao passar o mouse sobre:

filefilefile

Podemos escolher as propriedades a serem afetadas pela transição. Ao invés de todas, apenas as necessárias Funções temporais diferentes para propriedades diferentes também podem ser encadeados sem problemas.

Sass:

Para ajustar o comportamento, há varias variáveis Sass do Bourbon para várias funções temporais à nossa disposição.

filefilefile

Mixin para Font-Face

Tipografia é uma peça fundamental do quebra-cabeça ao projetar com alta qualidade para web. Em um nível atômico, ela guia várias decisões de design e podem influenciar a percepção do usuário em várias maneiras.

@font-face permite designers customizarem os tipos ao prover os usuários fontes que talvez não estejam instaladas nas máquinas.

Eis como incluiemos, tipicamente, @font-face em nossas folhas de estilo padrão, assumindo que nossos arquivos de fonte estão no diretório "fonts/SourceSansPro":

CSS:

Isso pode ser bem tedioso e dá margem a muitos erros. Felizmente, foram-se os dias dessa prática, graças à mixin font-face da Bourbon. Com Bourbon, parece com isso:

Sass:

Simples assim! Muito menos código. Há muito mais a explorar na mixin para font-face, como o argumento $file-formats (que permite-nos especificar o formato usado) e o [$asset-pipeline] do Rails (https://guides.rubyonrails.org/asset_pipeline.html), que é um pouco mais avançado, mas ajudar a organizar os artivos.

Tim-Tim!

Apenas vimos a superfície da grande lista de mixins da Bourbon. No próximo artigo, veremos ainda mais mixins.

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.