Sass Mixins: Mantenha suas folhas de estilo secas

Um dos meus benefícios favoritos de usar o Sass é que ele facilita muito a automatização do fluxo de trabalho de design de front-end. Existem muitas ferramentas JavaScript para trabalhar com arquivos e automatizar outras tarefas, mas os recursos de mixin integrados do Sass permitem escrever código de estilo front-end modular. Neste artigo, listei dez dos meus mixins Sass favoritos para automatizar a escrita de estilos da web.

Estes são os mixins Sass que eu uso para praticamente todos os projetos da web em que trabalho. Existem muitos artigos interessantes com alguns mixins Sass úteis em toda a web. Existem também algumas boas bibliotecas de mixin Sass que são ótimas para tarefas menores, como Bourbon. Outra grande biblioteca de mixins da qual derivou alguns dos mixins abaixo é o Andy.

Os mixins que abordarei neste artigo tratam do seguinte:

• Consultas de mídia
• Temas de cores
• Elementos de centralização
• Clearfix
• Tamanhos de fonte consistentes
• Transições de animação
• Imagens de retina
• Gradientes rápidos
• Fontes externas
• Preenchimento rápido/margens

Consultas de mídia

As consultas de mídia permitem que você adicione facilmente pontos de interrupção personalizados às suas folhas de estilo e adicione rapidamente um comportamento responsivo personalizado em um elemento para diferentes pontos de interrupção. No entanto, as consultas de mídia de folha de estilo podem se tornar rapidamente uma causa de dores de cabeça, especialmente quando se trata de mantê-las no caminho. Com mixins Sass, tudo isso pode mudar.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Com estes definidos, os mixins podem ser usados ​​da seguinte forma:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Funciona muito bem sozinho ou com outras estruturas de grade como o Bootstrap.

A instrução if emitirá uma consulta de mídia ajustada para um tamanho de tela específico, dependendo do nome do tamanho fornecido ao mixin. Isso permitirá que você ajuste facilmente o comportamento de seus atributos CSS de acordo. Você também pode personalizar o ponto em que deseja ajustar seus atributos CSS. Normalmente, os layouts mais responsivos ficam com 3 ou 4 dimensões de largura de tela definidas para ajustar o conteúdo. A variação de tamanhos de tela, dispositivos e aplicativos está sempre se expandindo, mas há uma tendência popular que muitos desenvolvedores da Web usarão para seus layouts; tamanhos de tela pequenos para telefones, médios para tablets, grandes para laptops e extragrandes para computadores de mesa.

Para referência, os pontos de mídia usados ​​no Bootstrap v3 são:

• max-width: 767px (qualquer tela de até 767px de largura)
• min-width: 768px (qualquer tela com mais de 768px de largura)
• min-width: 992px (qualquer tela com mais de 992px de largura)
• min-width: 1200px (qualquer tela com mais de 1200px de largura)

Temas de cores

Definir um tema de cores para usar em todo o site ajuda a economizar tempo ao ter as mesmas partes coloridas de CSS nos mesmos elementos HTML. Se você quiser que todos os seus botões div tenham uma borda pontilhada sólida de 1px, você pode facilmente adicionar isso ao seu tema. Este mixin Sass permitirá que você defina quantas variáveis ​​de cor desejar e afete quantas classes desejar. Essa pode ser uma ferramenta útil para fornecer opções de cores para algo ou sempre que você tiver um recurso que afete a cor de muitos elementos de uma só vez. Há um ótimo artigo aqui com mais informações sobre como trabalhar com temas de cores no Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Depois de configurar um tema de cores em profundidade, você eliminará 70% do estilo relacionado a cores, se feito corretamente. Eu também recomendaria separar este arquivo .scss de seus outros arquivos .scss e incluir todas as variáveis ​​de cor de sua marca no mesmo arquivo.

Uma linha tão simples como:

 @include theme(theme-banana, yellow);

emitirá:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Elementos de Centralização

Dependendo do seu layout, há muitas maneiras diferentes de centralizar um elemento em seus estilos. O método abaixo usa posicionamento absoluto e permitirá definir elementos verticais, horizontais ou ambos centralizados. O elemento pai precisará ter position: relative. Isso permite definir facilmente a posição centralizada de um elemento em 2 linhas curtas de código.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

Esse mixin é uma das formas mais versáteis de centralizar conteúdo, mas vale a pena notar que existem muitas maneiras diferentes de centralizar seu conteúdo, e isso nem sempre é a melhor solução. Dependendo do seu estilo de layout e permissão para compatibilidade do navegador, você pode querer centralizar seu conteúdo de uma maneira diferente. Flexbox é outra ferramenta popular e muito útil para alinhamento, embora no momento não seja totalmente suportada por navegadores antigos. O alinhamento simples de texto e contêiner pode ser feito facilmente sem esse mixin, usando propriedades css simples. Este irá ajudá-lo mais ao criar layouts e trabalhar com contêineres dentro de outros contêineres.

Clearfix

Aplique a propriedade clearfix css de forma rápida e eficaz aos elementos. Existem muitas soluções clearfix na web, e esta parece funcionar melhor. Também é fácil de usar uma vez que o mixin Sass é criado.

Este mixin será beneficiado sempre que você tiver conteúdo flutuando para a direita ou para a esquerda e desejar limpar o espaço abaixo do elemento flutuante para inserir novo conteúdo abaixo.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Tamanhos de fonte consistentes

Defina um tamanho de fonte rem em seu documento, para usar em todos os seus elementos de texto. Esta é a melhor maneira de aumentar e diminuir as fontes em vez de em. Usar em será composto com base nos outros atributos CSS, mas rem só aumentará ou diminuirá com base no tamanho que você definir em seu documento HTML. Separar um arquivo .scss para toda a sua tipografia e usar o mixin abaixo para definir seus tamanhos de fonte padrão automatizará drasticamente seu fluxo de trabalho de codificação de tipografia.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

Esse mixin também cria um fallback de pixel para navegadores que não suportam rem (IE8 e abaixo). Quando o navegador não suporta o dimensionamento de rem, o mixin calculará o pixel equivalente ao tamanho de rem inicial que você definiu e produzirá valores de pixel e rem para um elemento.

Animação

Defina rapidamente as propriedades da animação e adicione-as aos seus elementos. Atualmente, a propriedade CSS de animação ainda precisa de prefixos de fornecedor, então isso também adicionará isso à mistura.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

A primeira parte do mixin adicionará os prefixos de fornecedor apropriados necessários para a compatibilidade do navegador. A próxima seção o configura para inserir suas strings e propriedades personalizadas. A seção final do mixin é onde você criaria o nome do seu mixin (neste caso: fade-out) e definiria o que você gostaria que acontecesse em cada quadro-chave da animação. Esta configuração de exemplo é muito básica e você pode adicionar alterações a qualquer porcentagem da duração da animação.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

O exemplo aqui pegará o elemento de destino em 0% da animação (início) e fará a transição da propriedade de opacidade total (opacidade: 1;) para não ter opacidade e essencialmente desaparecer (opacidade: 0;) em 90% da animação . Portanto, se eu definir a animação para ter uma linha de tempo de 5 segundos, o elemento desaparecerá após 4,5 segundos (90% da animação de 5 segundos). A última propriedade que defino no uso do mixin (o “3”) é o número de vezes que a animação se repetirá.

Imagens de retina

Adicione imagens de alta resolução ao seu site, com um substituto para dispositivos que não exibem imagens de alta resolução. Ao usar imagens de retina, recomendo comprimir o máximo possível sem destruir a imagem. Uma boa ferramenta para isso é o TinyPNG (suporta PNG e JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Este mixin permitirá que você adicione uma regra no mesmo local que a propriedade CSS definindo a imagem original.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

Anteriormente, a única solução CSS para isso era usar consultas de mídia, e essa solução é muito mais limpa e fácil. Para mais pensamentos e ideias sobre este mixin, confira este artigo.

Gradientes rápidos

Adicione facilmente gradientes definindo apenas a cor inicial, a cor final e o tipo de gradiente. Adicione todas as propriedades do gradiente e você pode escolher conforme necessário. O tipo de gradiente permite escolher entre gradiente vertical, gradiente horizontal ou gradiente radial (em forma de esfera).

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Você não precisará mais lembrar os vários prefixos de fornecedores e ordens de parâmetros para implementar gradientes.

 .foo { @include background-gradient(red, black, 'vertical'); }

Fontes externas

Usando a propriedade CSS font-face, podemos facilmente adicionar fontes em um diretório e incluir todos os tipos de fontes. Ao usar arquivos de fonte, diferentes navegadores têm compatibilidade diferente com os tipos de arquivo. Este mixin ajuda a resolver isso usando qualquer arquivo de fonte relevante em um diretório.

Simplesmente inclua qualquer arquivo de fonte em um diretório e adicione a tag “@include” em seus estilos, que pegará todos os arquivos da pasta escolhida.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Este mixin cuidará da definição de URLs de formato de fonte alternativos, incluindo soluções alternativas estranhas necessárias para compatibilidade com versões anteriores.

Preenchimento rápido e margens

A principal razão de eu usar isso é porque vou omitir uma propriedade de preenchimento específica, como padding-left às vezes, e não quero defini-la. Usando a propriedade null do Sass, você pode omitir as propriedades de preenchimento. As mesmas regras se aplicam às margens.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

A mistura pode então ser usada para substituir um monte de propriedades padding-* e margin-* em suas folhas de estilo. Você pode incluir rapidamente esse mixin em qualquer elemento e definir apenas os lados do preenchimento/margens que deseja incluir. O preenchimento e as margens são um dos estilos CSS mais usados ​​adicionados aos elementos, e uma pequena economia de tempo como essa aumentará rapidamente.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Embrulhar

Usar mixins Sass como os descritos neste artigo é uma ótima maneira de tornar seu fluxo de trabalho mais eficiente. Esses mixins específicos ajudarão você a gastar menos tempo em tarefas comuns da Web, dando a você mais tempo para se concentrar em outros aspectos do projeto que exigem uma visão mais cuidadosa e qualificada.

Instalar e trabalhar com Sass pode ser feito de várias maneiras e envolverá o uso do prompt de comando para instalar algumas bibliotecas em seu projeto. Uma maneira de instalar o Sass é usar Ruby - conforme descrito no site principal do Sass aqui - e outra maneira popular é usar Node.js.

Os benefícios do Sass vão além da automação e podem ajudar a criar e gerenciar facilmente suas folhas de estilo de projeto. Mesmo alguns dos projetos web mais básicos podem ter milhares de linhas de código CSS. Sass é uma ótima maneira de dividir esse código em bits mais gerenciáveis, cada um com seu próprio foco.