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.