Escreva melhores consultas de mídia com Sass

Vamos encarar os fatos: as consultas de mídia podem ser uma dor de cabeça. Elas são difíceis de escrever e tendem a ser muito duplicadas. O Sass inclui alguns recursos úteis que tornam as consultas de mídia mais fáceis de trabalhar. Este artigo mostrará esses truques e como você pode usá-los para simplificar suas folhas de estilo.

O básico

Vamos dar uma olhada em um exemplo simples.

p {
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  p {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  p {
    font-size: 20px;
  }
}

Aqui, definimos o tamanho da fonte dos parágrafos como 16 pixels. Quando a largura da janela de visualização for maior ou igual a 768 pixels e menor ou igual a 1023 pixels, o tamanho da fonte será de 18 pixels. Quando a janela de visualização for maior ou igual a 1024 pixels, o tamanho da fonte será de 20 pixels.

Logo de cara, o senhor deve ficar impressionado com a quantidade de código necessária para fazer algo tão simples como tipografia responsiva. À medida que os projetos aumentam, o estilo acima de escrever consultas de mídia geralmente leva a uma das duas direções:

• As consultas de mídia são codificadas no código e copiadas onde são necessárias. Se quisermos alterar uma consulta de mídia, teremos que fazer isso em vários lugares.
• O projeto é dividido por tamanhos de viewport. É chocante e demorado ir a vários lugares para atualizar os estilos de um único elemento.

Encurtando as coisas

O Sass permite que as variáveis sejam interpoladas. Isso significa que podemos mover nossas consultas de mídia para variáveis e reutilizá-las.

$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";

p {
  font-size: 16px;
}

@media #{$tablet} {
  p {
    font-size: 18px;
  }
}

@media #{$desktop} {
  p {
    font-size: 20px;
  }
}

Agora, podemos usar o $tablet e $desktop consultas de mídia em qualquer lugar do nosso projeto sem duplicar o código. No entanto, ainda é irritante que nossas consultas de mídia sejam separadas do código que elas estilizam. O pessoal do Sass resolveu esse problema permitindo que as consultas de mídia sejam aninhadas.

$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";

p {
  font-size: 16px;

  @media #{$tablet} {
    font-size: 18px;
  }

  @media #{$desktop} {
    font-size: 20px;
  }
}

Mixins para o resgate

O código acima funciona, mas é um pouco difícil de ler. Podemos limpá-lo usando a função Sass mixins. Mixins são grupos de estilos que podem ser reutilizados em seu código. Um dos recursos interessantes dos mixins é que eles podem usar blocos de conteúdo. Isso nos permite escrever mixins como este:

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

Agora, podemos reescrever nosso exemplo acima para usar esses novos mixins.

p {
  font-size: 16px;

  @include tablet {
    font-size: 18px;
  }

  @include desktop {
    font-size: 20px;
  }
}

Não estamos limitados apenas aos tamanhos dos dispositivos. Podemos escrever consultas de mídia para muitas outras coisas úteis, como a consulta de mídia de Chris Coyier consulta de mídia retina ou uma consulta de mídia impressa.

@mixin retina {
  @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    @content;
  }
}

@mixin print {
  @media print {
    @content;
  }
}

Conclusão

As consultas de mídia são ótimas e, com o Sass, podem ser ainda melhores. Da próxima vez que usar uma, lembre-se desses truques para ajudar a tornar seu código mais legível e fácil de manter.