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:

<div class="ridiculous-background">

Sass:

.ridiculous-background
  +background-image(url("bourbon-logo@2x.png"), url("thoughtbot-logo.png"))
  background-position: center top, top left
  background-repeat: repeat-y, repeat-x
  height: 560px

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:

.ridiculous-background
  +background(url("bourbon-logo@2x.png"), url("thoughtbot-logo.png"))

Com Gradientes:

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

HTML:

<section class="super-duper-gradient">

Sass:

.super-duper-gradient
  +background-image(
  linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), 
  linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)))
  height: 50px

Mixin para Linear Gradient

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

HTML:

<section class="simple-gradient">

Sass:

$start-gradient-color: #268BD2
$end-gradient-color: #7229d1

.simple-gradient
  +linear-gradient($start-gradient-color, $end-gradient-color)
  height: 200px

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

Sass

$start-gradient-color: #268BD2
$end-gradient-color: #7229d1

.simple-gradient
  +linear-gradient(-90deg, $start-gradient-color, $end-gradient-color)
  height: 200px

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:

<section class="super-duper-borders">

Sass:

.super-duper-borders
  +background-image(
  linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), 
  linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)))
  +border-top-radius(3px)
  +border-bottom-radius(3px)

  height: 50px

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:

.super-duper-borders
  +linear-gradient($start-gradient-color, $end-gradient-color)
  +border-top-radius(600px)
  +border-bottom-radius(100px)
  height: 200px

Sass:

.super-duper-borders
  +linear-gradient($start-gradient-color, $end-gradient-color)
  +border-right-radius(600px)
  +border-left-radius(100px)
  height: 200px

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:

.user-profile
  +box-sizing(border-box)

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:

<section class='fancy-transition'>

Sass

.fancy-transition
  +transition (all 1.0s $ease-in-sine)

  height: 50px
  background-color: red
  +border-top-radius(5px)
  +border-bottom-radius(5px)

  &:hover
  background-color: blue
  +border-top-radius(25px)
  +border-bottom-radius(25px)

Estado inicial do elemento:

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

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

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:

// all
+transition (all 1.0s $ease-in-sine);

// fine-tuned
+transition (background-color 2.0s $ease-in-sine, height 1.0s $ease-out-cubic);

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

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:

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('fonts/SourceSansPro/sourcesanspro-regular.eot');
    src: url('fonts/SourceSansPro/sourcesanspro-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/SourceSansPro/sourcesanspro-regular.woff') format('woff'),
         url('fonts/SourceSansPro/sourcesanspro-regular.ttf') format('truetype'),
         url('fonts/SourceSansPro/sourcesanspro-regular.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('fonts/SourceSansPro/sourcesanspro-bold.eot');
    src: url('fonts/SourceSansPro/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/SourceSansPro/sourcesanspro-bold.woff') format('woff'),
         url('fonts/SourceSansPro/sourcesanspro-bold.ttf') format('truetype'),
         url('fonts/SourceSansPro/sourcesanspro-bold.svg#source_sans_probold') format('svg');
    font-weight: normal;
    font-style: normal;
}

// apply custom fonts to some classes

.regular-font {
  font-family: SourceSansPro-Regular;
}

.bold-font {
  font-family: SourceSansPro-Bold;
}

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:

+font-face(SourceSansPro-Regular, 'fonts/SourceSansPro/sourcesanspro-regular', normal)
+font-face(SourceSansPro-Bold, 'fonts/SourceSansPro/sourcesanspro-bold', bold)

.regular-font
  font-family: SourceSansPro-Regular

.bold-font
  font-family: SourceSansPro-Bold

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.