¿Cómo se hace una consulta de medios usando SASS?

Question

He leído la documentación de SASS y solo puedo encontrar cómo hacer una consulta de medios usando la sintaxis scss en lugar de la sintaxis sass (sass es la que tiene un espacio en blanco estricto sin llaves ni punto y coma). ¿Cómo se hace una consulta de medios usando sintaxis sass?

Answer 1

@media screen and (min-height: 500px) 
    body 
    margin-top: 100px 

Answer 2

prefiero aplicarlo sólo en ciertas propiedades, por ejemplo,

.jumbotron h1.pickup 
    @include LATO 
    font-size: 50px 
    color: white !important 
    @media (max-width: 767px) 
     font-size: 36px 
    @media (max-width: 500px) 
     font-size: 30px 

Answer 3

Se ve como un gran lugar para utilizar mixins Sass.

Puede utilizar @content Sass para cargar dentro todo dentro de los "soportes" (en mi caso dentro de utilización mixin indencion declaración)

Aquí tienen estructura mixin Sass yo uso para el manejo de consulta de medios. Está escrito de una manera para darle libertad de implementación.

Puede hacer algunos ajustes preestablecidos de configuración personalizada y usarlos si eso es lo que desea o puede personalizarlos como desee. Incluso si puede encontrar muchos manejadores de mixin de consultas de medios diferentes, yo personalmente prefiero inyectar valles en la mezcla en lugar de definirlos dentro de la estructura de mezcla.

Esto se debe a un par de razones. Podemos enfocarnos en el ancho o la altura específicos del dispositivo o simplemente podemos intentar que se vea bien sin el sistema de ancho de los puntos de corte. A veces, esto es simplemente una solución más conveniente y mejor, por eso necesitamos una mezcla que nos brinde una flexibilidad total.

_mixins.sass

// mixin 
=media($type1, $size1: null, $type2: null, $size2: null) 
    @if ($type1) and ($size1) and ($type2) and ($size2) 
    @media ($type1: $size1) and ($type2: $size2) 
     @content 
    @elseif ($type1) and ($size1) and not ($type2) and not ($size2) 
    @media ($type1: $size1) 
     @content 
    @elseif ($type1) and not ($size1) and not ($type2) and not ($size2) 
    $map: $type1 
    @if map-has-key($map, "type2") and map-has-key($map, "size2") 
     @media (#{map-get($map, "type1")}: #{map-get($map, "size1")}) and (#{map-get($map, "type2")}: #{map-get($map, "size2")}) 
     @content 
    @else 
     @media (#{map-get($map, "type1")}: #{map-get($map, "size1")}) 
     @content 
    // ... add more conditions if aproppriate 
    @else 
    @error "Upsss...." 

_variables.sass

// width definition (optional) 
$xs: "30em" 
$s: "36em" 
$m: "42em" 
$ml: "48em" 
$l: "54em" 
$xl: "60em" 
$xxl: "65em" 

// options - types of restriction (optional) 
$minw: "min-width" 
$maxw: "max-width" 
$minh: "min-height" 
$maxh: "max-height" 

// preset configuration (optional) 
$mobile: ("type1": $minw, "size1": $s) 
$tablet: ("type1": $minw, "size1": $m) 
$laptop: ("type1": $minw, "size1": $ml) 
$desktop: ("type1": $minw, "size1": $l) 
$tv: ("type1": $minw, "size1": $xxl) 
$wide: ("type1": $minw, "size1": $m, "type2": $maxh, "size2": $s) 

main.sass

@import variables 
@import mixins 

// use examples1 -------------- using variables 
+media($minw, $xs) 
    p 
    font-size: 1em 
    padding: 0px 

// use examples2 -------------- using both varible and string 
+media($minw, "1000px") 
    p 
    font-size: 2em 
    padding: 10px 

// use examples3 -------------- using strings only 
+media("min-width", "62.5em") 
    p 
    font-size: 3em 
    padding: 15px 

// use examples4 -------------- using predefind configuration 
+media($tablet) 
    p 
    font-size: 4em 
    padding: 20px