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

Um Pouco das Deliciosas Mixins do Bourbon

by
Difficulty:BeginnerLength:ShortLanguages:
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:

file

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:

file

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:

file

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

Sass

file

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:

file

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:

file

Sass:

file

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:

file

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

file

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

file

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.

file

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
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.