Um dos meus benefícios favoritos de usar Sass é que ele torna a automação do fluxo de trabalho de design de front-end muito fácil. 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 favoritos do Sass para automatizar a escrita de estilos da web.

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

Os mixins que examinarei neste artigo tratam do seguinte:

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

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 dentro de um elemento para diferentes pontos de interrupção. No entanto, consultas de mídia em folhas de estilo desordenadas podem rapidamente se tornar uma causa de dores de cabeça, especialmente quando se trata de mantê-las no futuro. Com os 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 eles 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 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 ficarão 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 em seus layouts; tamanhos de tela pequena para telefones, média para tablets, grande para laptops e extra grande para computadores desktop.

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

• largura máxima: 767 px (qualquer tela de até 767 px de largura)
• largura mínima: 768 px (qualquer tela com mais de 768 px de largura)
• largura mínima: 992 px (qualquer tela com mais de 992 px de largura)
• largura mínima: 1200 px (qualquer tela com mais de 1200 px de largura)

Temas de cores

Definir um tema de cores para usar em todo o site ajuda a economizar tempo por ter as mesmas partes coloridas de CSS nos mesmos elementos HTML. Se você deseja que todos os seus botões div tenham uma borda pontilhada sólida de 1px, você pode adicionar isso facilmente ao seu tema. Este mixin Sass permitirá que você defina quantas variáveis ​​de cor você quiser e afete quantas classes você quiser. Essa pode ser uma ferramenta útil para fornecer opções de cores para algo ou sempre que houver um recurso que afete a cor de muitos elementos de uma 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 seu estilo relacionado a cores, se feito da maneira certa. Também recomendo separar esse 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);

irá 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 alinhar um elemento ao centro em seus estilos. O método abaixo usa posicionamento absoluto e permitirá que você defina elementos verticais, horizontais ou ambos centralizados. O elemento pai precisará ter posição: relativa. Isso permite que você defina 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; }

Este mixin é uma das formas mais versáteis de centralizar o conteúdo, mas é importante notar que existem muitas maneiras diferentes de centralizar o seu conteúdo, e esta pode nem sempre ser a melhor solução. Dependendo do seu estilo de layout e da 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 compatível com navegadores antigos. Texto simples e alinhamento de contêiner podem ser feitos facilmente sem esse mixin, usando propriedades css simples. Este o ajudará mais na criação de layouts e no trabalho com containers dentro de outros containers.

Clearfix

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

Este mixin se beneficiará sempre que você tiver conteúdo flutuando para a direita ou esquerda e quiser 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 ou diminuir as fontes em vez de aumentá-las. O uso de em será composto com base nos outros atributos CSS, mas rem só aumentará ou diminuirá com base no tamanho definido em seu documento HTML. Separar um arquivo .scss para toda a sua tipografia e usar o mixin abaixo para definir os 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) }

Este mixin também cria um substituto de pixel para navegadores que não suportam rem (IE8 e inferior). Quando o navegador não suporta o tamanho rem, o mixin calculará o pixel equivalente ao tamanho rem inicial que você definiu e produzirá os 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 da animação ainda precisa de prefixos do fornecedor, então isso também irá adicioná-la à 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 adequados do fornecedor necessários para compatibilidade do navegador. A próxima seção o configura para inserir suas strings e propriedades customizadas. A seção final do mixin é onde você criaria seu nome de mixin (neste caso: fade-out) e definiria o que você gostaria que acontecesse em cada quadro-chave na 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 sem opacidade e essencialmente desaparecendo (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 Retina

Adicione imagens de alta resolução ao seu site, com uma alternativa para dispositivos que não exibem imagens de alta resolução. Ao usar imagens de retina, eu recomendaria compactar o máximo possível sem destruir a imagem. Uma boa ferramenta para isso é 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 da propriedade CSS que define 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, dê uma olhada Este artigo .

Gradientes Rápidos

Adicione gradientes facilmente definindo apenas a cor inicial, a cor final e o tipo de gradiente. Adicione todas as propriedades de 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 terá mais que se lembrar dos vários prefixos de fornecedores e pedidos 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, navegadores diferentes têm compatibilidade diferente com 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 irá pegar todos os arquivos de sua 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 tomará o cuidado de definir URLs de formato de fonte alternativo, incluindo soluções alternativas estranhas necessárias para compatibilidade com versões anteriores.

Preenchimento rápido e margens

O principal motivo de eu usar isso é porque irei omitir uma propriedade de preenchimento específica, como padding-left às vezes, e não quero defini-la. Usando o null da propriedade 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 mixagem pode então ser usada para substituir várias propriedades padding- * e margin- * em suas folhas de estilo. Você pode incluir rapidamente este mixin em qualquer elemento e definir apenas os lados do preenchimento / margens que deseja incluir. Preenchimento e margens são um dos estilos CSS mais usados ​​adicionados a elementos, e uma pequena economia de tempo como essa será adicionada 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 irão ajudá-lo a gastar menos tempo em tarefas comuns da web, dando-lhe mais tempo para se concentrar em outros aspectos do projeto que requerem uma visão mais cuidadosa e qualificada .

A instalação e o trabalho com o Sass podem ser feitos 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 forma 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 mais básicos da web podem ter milhares de linhas de código CSS. Sass é uma ótima maneira de quebrar esse código em partes mais gerenciáveis, cada uma com seu próprio foco.

Relacionado: Guia de estilo Sass: um tutorial Sass sobre como escrever um código CSS melhor