Estilos responsivos à entrada com Sass

Organizar estilos responsivos em sua folha de estilo existente é sempre um desafio, mas um simples mixin Sass pode fornecer a você uma maneira muito simples de injetar responsividade sempre que necessário.

Aqui está o cenário. Você tem a maioria dos seus estilos responsivos especificados nas @mediachamadas, mas às vezes, mesmo aninhar estilos responsivos parece um exagero. Quando apenas um ou dois itens são alterados responsivamente, as linhas de código podem ser adicionadas rapidamente. Por exemplo, digamos que eu tenha um elemento com vários estilos que só precisa da margem e do tamanho da fonte para mudar em 800 px ou menos:

.my_cool_element
  font-size: 24px
  margin-bottom: 40px
  // a ton of other stuff here
  @media screen and (max-width: 800px)
    font-size: 18px
    margin-bottom: 20px

Há um problema simples de legibilidade aqui: pode haver muitas linhas de código entre o estilo original e o responsivo. Além disso, se eu quiser novos estilos em um segundo ponto de interrupção (por exemplo, 480px para celular), vou precisar listar cada atributo uma terceira vez em uma nova @mediachamada.

Isso me fez pensar. Considerando que eu estava usando no máximo dois pontos de interrupção (aproximadamente do tamanho de um tablet e quase um tamanho de dispositivo móvel) e, muitas vezes, estava mudando apenas alguns atributos por seletor, havia uma maneira de eliminar todos os valores de atributo possíveis em uma linha?

Entre no responsivemixin.

= responsive($attr, $full, $mid:false, $narrow:false)
  #{$attr}: #{$full}
  @if $mid
    @media screen and (max-width: 800px)
      #{$attr}: #{$mid}
  @if $narrow
    @media screen and (max-width: 480px)
      #{$attr}: #{$narrow}

Aqui está a mágica: com este mixin, posso especificar todos os meus valores de ponto de interrupção em um só lugar. Acabei de passar o atributo para responsive, junto com o valor de cada ponto de interrupção.

.my_cool_element
  +responsive(font-size, 24px, 20px)
  +responsive(margin-bottom, 40px, 20px)
  font-size: 24px
  margin-bottom: 40px

Portanto, se eu precisar adicionar mais atributos no ponto de interrupção de 480px, posso simplesmente passar um terceiro valor para a chamada apropriada :+responsive

.my_cool_element
  +responsive(font-size, 24px, 20px, 16px)
  +responsive(margin-bottom, 40px, 20px, 10px)
  font-size: 24px
  margin-bottom: 40px

Descobri que essa técnica é extremamente útil para polvilhar minha folha de estilo com capacidade de resposta. (Eu também recomendo abstrair seus tamanhos de ponto de interrupção em variáveis ​​Sass, mas isso está fora do escopo deste post.) Obviamente, você encontrará cenários em que está alterando 5 ou 6 atributos, em cujo ponto esse elemento terá superado essa técnica – mas assim que comecei a abordar a responsividade com este mixin, descobri que ele estava reduzindo muitos @mediaaninhamentos prolixos .

Então, dê uma chance! Talvez isso torne sua vida mais fácil.+responsive

(postado originalmente no blog Hashrocket )