10 mixins em Sass que você deveria usar em seus projetos

O texto a seguir é uma tradução livre e autorizada do excelente post “10 Sass (SCSS) mixins you should be using in your projects”, de Jamie Wright. É mostrado dez dicas de mixins feitos em Sass que ele usa em seu trabalho e que com certeza são códigos muito úteis para qualquer dev front-end que usa o Sass como pré-processador. 

Primeiramente, obrigado Jamie pelo post. E muito obrigado também por ter permitido que eu fizesse essa tradução. Ah…Importante frisar que a tradução não é literal, adaptei algumas coisas para pt-br. 

Se você quer aprender esse pré-processador CSS na prática, do zero, dá uma olhada no meu livro de Sass, publicado pela Casa do Código. E há também meu curso de Sass na AluraAgora vamos a lista de mixins!

1 – Centralizar

Para centralizar rapidamente um elemento de bloco sem ter que se preocupar se há uma `margin-top` ou `margin-bottom` já aplicada:

@mixin push--auto {
    margin: { 
        left: auto;
        right: auto;
    }
}

2 – Pseudo-elementos

Quando você usa o ::before e o ::after você sempre precisa desses três, então economize duas linhas de código todas vez que usar este mixin.

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}

Veja abaixo um exemplo usando nenhum argumento (você também vai ver este mixin em outros abaixo também).


div::after {
    @include pseudo;
    top: -1rem; left: -1rem;
    width: 1rem; height: 1rem;
}

 

3 – Proporção responsiva

Nós usamos este aqui para criar elementos escaláveis (normalmente imagens / backgrounds) que precisem manter a proporção.

@mixin responsive-ratio($x,$y, $pseudo: false) {
    $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }
    } @else {
        padding-top: $padding;
    }
}

Então para usar este mixin você poderia escrever o código abaixo e sua `div` teria uma proporção comumente utilizada por vídeos (16:9), como do Youtube:

div {
    @include responsive-ratio(16,9);
}

 

4 – Triângulos em CSS

Este mixin resolve toda a trabalheira de criar triângulo em CSS, tudo isso sem imagens. Basta você especificar a cor, o tamanho e a direção que vai sair do elemento, e pronto!



@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
    @include pseudo($pos: $position);
    width: 0;
    height: 0;
    @if $round {
        border-radius: 3px;
    }
    @if $direction == down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
        margin-top: 0 - round( $size / 2.5 );
    } @else if $direction == up {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: $size solid $color;
        margin-bottom: 0 - round( $size / 2.5 );
    } @else if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        margin-right: -$size;
    } @else if  $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        margin-left: -$size;
    }
}


 

5 – Estilos de fonte

Elimine a dor de definir estilos para uma fonte (este mixin assume que você já incluiu a fonte). Defina a fonte de fallback uma vez e nunca mais se preocupe com isso de novo.

</pre>

@mixin font-source-sans($size: false, $colour: false, $weight: false,  $lh: false) {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    @if $size { font-size: $size; }
    @if $colour { color: $colour; }
    @if $weight { font-weight: $weight; }
    @if $lh { line-height: $lh; }
}

 

6 – Placeholders

Eles são uma chatice quando você tem que definir o estilo em todos os formatos diferentes, esse mixin o arruma pra você:


@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

Se por acaso você não tiver acostumado a usar o @content, um exemplo de uso:


input,  
textarea {  
    @include input-placeholder {
        color: $grey;
    }
}

 

7 – Media queries

Essa é pra economizar tempo! Você pode usar valores em pixel mas nós temos breakpoints padrões definidos que também funcionam, economizando tempo enquanto você vai deixando seus próprios breakpoints mais consistentes.

$breakpoints: (
    "phone":        400px,
    "phone-wide":   480px,
    "phablet":      560px,
    "tablet-small": 640px,
    "tablet":       768px,
    "tablet-wide":  1024px,
    "desktop":      1248px,
    "desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

O exemplo abaixo mostra o `padding` e o `font-size` aumentando quando a largura da tela fica maior que 1024px.


.site-header {
    padding: 2rem;
    font-size: 1.8rem;
    @include mq('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}

 

8 – Z-index

Tecnicamente este aqui é uma função, mas eu senti que valia colocá-lo na lista, já que é muito fácil perder o controle sobre os valores de `z-index` quando se trabalha com vários arquivos diferentes. Então nós criamos este mixin para que pudéssemos colocar esses valores em um só lugar para facilitar a manutenção. Apenas coloque esse snippet no seu arquivo variaveis.scss ou configs.scss (precisa ser importando antes de qualquer outro arquivo que faz referência ao z-index, claro).



@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
        @return null;
    }
}
$z-indexes: (
    "outdated-browser",
    "modal",
    "site-header",
    "page-wrapper",
    "site-footer"
);

Aí sempre que você for usar um valor de z-index, nomeie-o igual a sua classe e adicione no arquivo de variáveis/configs, como no código abaixo. Você nunca mais vai ter que esquentar a cabeça com um `z-ndex: 9999999`.

.site-header {
    z-index: z('site-header');
}

 

9 – Hardware

Simples e eficaz para quando você precisa ligar a aceleração de hardware para alguma animação, deixando tudo rápido, elegante e sem lag.


@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}

 

10 – Truncar

Truncar um elemento não é tão simples como deveria ser, mas pode ser com este mixin. O que significa que quando você incluí-lo terá apenas que especificar um limite com um valor de `max-width`, e ser feliz!

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

E isso não é tudo!

Nós temos muito mais de onde veio esses, desde adicionar um anti-aliasing (suavização) em texto, ou remover a opção de selecionar texto em um elemento (útil para menus ou botões etc). Você pode achar todos eles no nosso arquivo de mixins (que faz parte do Engage Front End Baseplate lá no Github).

8 Comentários

  1. Cristofer 05/09/2016 at 12:47 #

    Natan, estou adotando Sass para projetos novos, como você trabalha quando vai lidar com legado? Você refatora o CSS do zero e vai criando os módulos seguindo alguma abordagem como BEM? Excelente artigo! Abraços

  2. Natan Souza 05/09/2016 at 13:03 #

    Oi Cristofer! Nunca trabalhei com Sass+legados, mas acredito que ir de pouco em pouco, seja com BEM ou Atomic Design ou (insira sua arquitetura CSS favorita aqui) ser uma abordagem bacana e segura. Fico feliz que tenha gostado do artigo! Abraços!

  3. Midori 05/09/2016 at 13:13 #

    Parabéns pelo post! Ótima explicação e de fácil leitura!

  4. Natan Souza 05/09/2016 at 13:31 #

    Oi Midori! Obrigado pelo comentário, mas créditos para o Jamie Wright, autor do post original. Abraços!

  5. Clóvis Neto 05/09/2016 at 14:50 #

    Mutio bom natan! O mais bacana é que os conceitos utilizados acima não servem apenas para o SASS mas para qualquer tipo de pré-processador

  6. Kevin Oliveira 06/09/2016 at 00:18 #

    Nathan, excelente tradução. Uma coisa que percebi é que alguns desses poderiam ser placeholders ao invés de mixins, certo? Por exemplo o de centralizar, pois com os placeholders ao compilar estaríamos juntando todas as classes que utilizaram para o mesmo grupo do placeholder, economizando código e aumentando a performance.

  7. Natan Souza 06/09/2016 at 09:20 #

    Oi Kevin, obrigado pelo elogio! Seguinte… Sim, faz todo sentido, uma vez que quando o mixin não possui nenhum parâmetro podemos usar o placeholder/extend para juntar as regras em uma só. Mas lembro que li em um post que o autor compara o uso dos dois, e o mixin “ganha”, pq o Gzip lida bem com texto repetido (o que acontece quando usamos mixins). Não achei o artigo, mas aqui tem um do CSSWizardry que fala desse tema. Abcs!

  8. Fernando Moreira 09/09/2016 at 15:55 #

    Show! Parabéns pelo artigo, realmente uteis todos eles.

Deixe uma resposta