sass: use ajudantes de consulta de mídia

Caso você ainda não saiba sobre isso.

Eu tentei isso meses atrás sem sorte, mas algumas semanas atrás eu descobri que você finalmente pode usar mixins legais para mixar suas mudanças de breakpoint.

Em primeiro lugar, olhe para esta essência de anthony:
https://gist.github.com/anthonyshort/2028061

$mq-mobile-portrait     : 320px !default;
$mq-mobile-landscape    : 480px !default;
//...

// Both portrait and landscape
@mixin mobile-only {
    @media (max-width : $mq-mobile-landscape) {
        @content;
    }
}

Lá você encontrará muitos títulos de combinações como “somente para celular”, “paisagem para tablet e para cima”, “somente para desktop” … você nunca usará todos. Está relacionado ao seu estilo de estilo.

Não, você pode simplesmente embrulhar suas declarações assim:

@include tablet-landscape-and-up {
  li {
      display: none;
  }
}

Ou mesmo aninhado assim:

.element {
  display: none;
  @include tablet-landscape-and-up{
    display: inline-block;
  }
}