Consultas @mídia incríveis com Sass e @content

Sass tem um recurso muito útil que geralmente não é amplamente conhecido: @content . Você quase pode pensar em algo @contentparecido yield– isso nos permite definir um mixin Sass que pode ter CSS aninhado.

Isso faz com que seja @mediauma alegria trabalhar com as consultas. Chega de brincar com as larguras mín., Máx. E de dispositivos e tentar visualizar o que você está tentando alcançar em sua cabeça. O módulo a seguir provavelmente irá economizar horas preciosas de seu tempo, pois reduz a repetição de código (DRY) e faz uso de nomenclatura semântica (compreensível instantaneamente).

tl; dr Ver fonte no GitHub

Como funciona

Definir variáveis

Primeiro, precisamos configurar as larguras de dispositivo padrão que queremos visar. Para simplificar, usarei apenas os tamanhos de iPhone, iPad e Desktop adaptados de CSSTricks neste exemplo.

$iphone-portrait: 320px
$iphone-landscape: 480px
$ipad-portrait: 768px
$ipad-landscape: 1024px
$desktop: 1224px
$desktop-large: 1824px

Agora para as coisas boas.

Consultas @mídia específicas

Faremos uso de mixins Sass e sua capacidade de passar argumentos para dispositivos muito específicos. É uma boa ideia inventar algo semântico (com significado) para que fique imediatamente claro o que você quer dizer quando você ou outra pessoa lê-lo algumas semanas depois.

Vamos em frente respond-to, para que eu possa escrever algo assim mais tarde:

.foobar
  +respond-to(ipad-portrait)
    width: 50%
  +respond-to(iphone-portrait)
    padding: 2.5%

Isso é incrivelmente legível e instantaneamente faz mais sentido do que decifrar algo assim .@media only screen and (max-width: 320px) and (orientation: portrait)

Aqui está um trecho de nossa função Sass para :respond-to

=respond-to($device)

  @if $device == retina-display
    @media only screen and (-webkit-min-device-pixel-ratio: 2)
      @content

  @if $device == iphone
    @media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape)
      @content

  @if $device == ipad
    @media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape)
      @content

...etc

Agora, isso é muito longo, mas é basicamente apenas uma função de caso simples. A mágica está em @content, o que nos permite passar o CSS que queremos aplicar na @mediaconsulta acima dele. Tenho certeza de que você também pode pensar em várias outras maneiras de usar @content.

Consultas @mídia gerais

Agora, digamos que não queremos ser tão específicos e queremos incluir algum CSS para qualquer coisa menor do que um iPad – paisagem. Em vez de fazer algo bobo como usar várias variações da função acima , vamos apenas definir uma nova que terá muitos dispositivos.respond-toapply-to

Aqui está o trecho de nossa função:

=apply_to($ltgt, $device)
  $extrema: null
  @if $ltgt == less-than
    $extrema: max
  @if $ltgt == greater-than
    $extrema: min

  @if $device == iphone-portrait
    @media only screen and (#{$extrema}-width: $iphone-portrait)
      @content

  @if $device == ipad-landscape
    @media only screen and (#{$extrema}-width: $ipad-landscape)
      @content

...etc

Aqui, acabamos de adicionar um ifmétodo simples que nos permite escrever nomes e argumentos mixin mais significativos. Porque $extrema?

Agora podemos fazer isso:

.foobar
  +apply-to(less-than, ipad-landscape)
    content: 'that is awesome'
    background: black

Sass é incrível e você deveria usá-lo.