Pesquisas multimédia na SAS

estou a pensar se há uma maneira de escrever perguntas de mídia em sass, para que eu possa dar um certo estilo entre digamos: 300px a 900px

em css parece-se com isto 

@media only screen and (min-width: 300px) and (max-width: 900px){

}
Sei que posso escrever. 
@media (max-width: 900px)
Mas como fazer esse alcance?

Author: Maciej S., 2016-04-30
Source

4 answers

$small: 300px;
$medium: 900px;

.smth {
  //some CSS
  @media screen and (max-width: $small) {
    //do Smth
  }
  @media screen and (min-width: $medium) {
      //do Smth
  }
}
Algo assim?
 0
Author: pguetschow, 2016-04-30 17:23:43

@media (max-width: 300px) and (min-width: 900px){..}

 0
Author: highFlyingSmurfs, 2016-05-03 13:28:23

Isto é o que eu uso para uma mistura com o sass, permite-me referenciar rapidamente o ponto de paragem que eu quero. obviamente você pode ajustar a lista de pesquisas de mídia para Suíte o seu punho móvel do projeto, etc.

Mas vai dar-te muitas dúvidas, Como acredito que estás a pedir. 
$size__site_content_width: 1024px;

/* Media Queries */ Not necessarily correct, edit these at will 
$media_queries : (
    'mobile'    : "only screen and (max-width: 667px)",
    'tablet'    : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
    'desktop'   : "only screen and (min-width: ($size__site_content_width + 1))",
    'retina2'   : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
    'retina3'   : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
    'landscape' : "screen and (orientation:landscape) ",    
    'portrait'  : "screen and (orientation:portrait) "
);

@mixin for_breakpoint($breakpoints) {
    $conditions : ();
    @each $breakpoint in $breakpoints {
        // If the key exists in the map
        $conditions: append(
            $conditions,
            #{inspect(map-get($media_queries, $breakpoint))},
            comma
        );
    }

    @media #{$conditions} {
        @content;
    }

}

Usa-o assim no teu scss: 

#masthead {
    background: white;
    border-bottom:1px solid #eee;
    height: 90px;
    padding: 0 20px;
    @include for_breakpoint(mobile desktop) {
        height:70px;
        position:fixed;
        width:100%;
        top:0;
    }
}

Então Isto irá compilar para: 

#masthead { 
  background: white;
  border-bottom: 1px solid #eee;
  height: 90px;
  padding: 0 20px;
}

@media only screen and (max-width: 667px), only screen and (min-width: 1025px) {
  #masthead {
    height: 70px;
    position: fixed;
    width: 100%;
    top: 0;
  }
}
 0
Author: Kyzer, 2018-03-22 06:19:22
Vê isto para a scss. https://github.com/Necromancerx/media-queries-scss-mixins

Utilização

    .container {
      @include xs {
        background: blue;
      }

      @include gt-md {
        color: green
      }
    }

Demonstração: Stackblitz

Com base em Flexlayout angulares MediaQueries

 0
Author: John Paulo Rodriguez, 2018-07-01 15:33:22