scss - Uso de variables de Sass con consultas de medios CSS3

scss file

Question

Intento combinar el uso de una variable Sass con las consultas @media de la siguiente manera:

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}

$base_width se define en varios puntos en las medidas basadas en porcentaje de ancho de hoja de estilo para producir diseños de fluido.

Cuando hago esto, la variable parece ser reconocida correctamente, pero las condiciones para la consulta de medios no lo son. Por ejemplo, el código anterior produce un diseño de 1160 px independientemente del ancho de la pantalla. Si cambio las declaraciones @media de esta manera:

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

Produce un diseño de 960 px, de nuevo independientemente del ancho de la pantalla. También tenga en cuenta que si $base_width: 1160px; la primera línea de $base_width: 1160px; devuelve un error para una variable indefinida. ¿Alguna idea de lo que me estoy perdiendo?

Answer 1

Esto simplemente no es posible. Dado que la @media screen and (max-width: 1170px) trigger @media screen and (max-width: 1170px) ocurre en el lado del cliente.

Lograr el resultado esperado solo sería posible si SASS tomó todas las reglas y propiedades en su hoja de estilo que contiene su variable $base_width y las copió / modificó en consecuencia.

Como no funcionará automáticamente, puede hacerlo a mano de esta manera:

@media screen and (max-width: 1170px)
      $base_width: 960px // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $base_width e.g.
      #wrapper
          width: $base_width
          ...

@media screen and (min-width: 1171px)
    $base_width: 1160px
      #wrapper
          width: $base_width
          ...

Esto no es realmente SECO, pero es lo mejor que puedes hacer.

Si los cambios son los mismos cada vez, también podría preparar una mezcla que contenga todos los valores cambiantes, para que no tenga que repetirla. Además, puede intentar combinar la mezcla con cambios específicos. Me gusta:

@media screen and (min-width: 1171px)
    +base_width_changes(1160px)
    #width-1171-specific-element // additional specific changes, that aren''t in the mixin
        display: block

Y el Mixin se vería así

=base_width_changes($base_width)
    #wrapper
        width: $base_width

Answer 2

Similar a la respuesta de Philipp Zedler, puedes hacerlo con un mixin. Eso le permite tener todo en un solo archivo si lo desea.

@mixin styling($base-width) {
    // your SCSS here, e.g.
    #Contents {
        width: $base-width;
    }
}

@media screen and (max-width: 1170px) {
    @include styling($base-width: 960px);
}
@media screen and (min-width: 1171px) {
    @include styling($base-width: 1160px);
}

Answer 3

Yo tuve el mismo problema.

La variable $menu-width debe ser 240px en la vista móvil @media only screen and (max-width : 768px) y 340px en la vista de escritorio .

Así que simplemente he creado dos variables:

$menu-width: 340px;
$menu-mobile-width: 240px;

Y así es como lo he usado:

.menu {
    width: $menu-width;
    @media only screen and (max-width : 768px) {
      width: $menu-mobile-width;
    }
}

Answer 4

Editar: Por favor, no use esta solución. La respuesta de ronen es mucho mejor.

Como solución DRY, puede usar la instrucción @import dentro de una consulta de medios, por ejemplo, de esta manera.

@media screen and (max-width: 1170px) {
    $base_width: 960px;
    @import "responsive_elements";
}
@media screen and (min-width: 1171px) {
    $base_width: 1160px;
    @import "responsive_elements";
}

Usted define todos los elementos receptivos en el archivo incluido utilizando las variables definidas en la consulta de medios. Entonces, todo lo que necesita repetir es la declaración de importación.