10 mixins em Sass que você deveria usar em seus projetos
10 mixins explicados 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.
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.
@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 temosbreakpoints 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-index: 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;
}