Uso de variables Sass con Consultas de medios CSS3

Question

Uso de variables Sass con Consultas de medios CSS3

Estoy tratando de combinar el uso de una variable Sass con @ media queries 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 luego se define en varios puntos de las mediciones basadas en porcentajes de ancho de hoja de estilos para producir diseños fluidos.

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 1160px independientemente del ancho de pantalla. Si doy la vuelta a las @declaraciones de medios como así:

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

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

71

media-queries sass

Author: Volker E., 2012-02-03

Source

4 answers

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);
}

27

Author: ronen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-11 12:35:56

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

Como solución SECA, puede usar la instrucción @import dentro de una consulta de medios, por ejemplo, así.

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

Se definen todos los elementos responsivos en el archivo incluido utilizando las variables definidas en la consulta de medios. Por lo tanto, todo lo que necesita repetir es la instrucción import.

6

Author: Philipp Zedler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-01 10:20:12

Yo tenía el mismo problema.

La variable $menu-width debe ser 240px en la vista mobile @media only screen and (max-width : 768px) y 340px en la vista desktop.

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;
    }
}

1

Author: Dawid Dyrcz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-03 18:22:40

score 69 · Accepted Answer

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

Lograr el resultado esperado solo sería posible si SASS tomara todas las reglas y propiedades de su hoja de estilos que contienen su variable $base_width y las copiara/cambiara en consecuencia.

Dado que no funcionará automáticamente, podría 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 lo mejor que puedes hacer.

Si los cambios son los mismos cada vez que usted también podría prepare un mixin que contenga todos los valores cambiantes, para que no tenga que repetirlo. Además, puede tratar de combinar el mixin con cambios específicos. Como:

@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