Utilisation des variables Sass avec les requêtes multimédias CSS3

Question

J'essaie de combiner l'utilisation d'une variable Sass avec des requêtes @media comme suit :

$base_width:1160px;

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

$base_width est ensuite définie à différents endroits de la feuille de style ; les mesures en pourcentage de la largeur permettent de produire des mises en page fluides.

Lorsque je fais cela, la variable semble être reconnue correctement mais les conditions de la requête média ne le sont pas. Par exemple, le code ci-dessus produit une mise en page de 1160px quelle que soit la largeur de l'écran. Si je permute les déclarations @media comme suit :

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

Il produit une mise en page de 960px, là encore indépendamment de la largeur de l'écran. Notez également que si je supprime la première ligne de l'élément $base_width: 1160px; il renvoie une erreur pour une variable non définie. Une idée de ce que j'ai raté ?

Answer 1

J'ai eu le même problème.

El $menu-width doit être de 240px sur l'écran mobile voir @media only screen and (max-width : 768px) et 340px sur le bureau vue.

J'ai donc simplement créé deux variables :

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

Et voici comment je l'ai utilisé :

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

Answer 2

Deux recommandations

1 Rédigez vos déclarations CSS "par défaut" pour les petits écrans et n'utilisez les requêtes média que pour les écrans plus grands. Il n'est généralement pas nécessaire d'utiliser un max-width requête des médias.

Exemple (en supposant que l'élément a la classe "container")

@mixin min-width($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

.container {
  width: 960px;

  @include min-width(1170px) {
    width: 1160px;
  }
}

2 Utilisez les variables CSS pour résoudre le problème, si vous pouvez .

@mixin min-width($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

:root {
  --container-width: 960px;
  @include min-width(1170px) {
    --container-width: 1160px;
  }
}

.container {
  width: var(--container-width);
}

Nota:

Comme il aura une largeur de 1160px alors que la fenêtre a une largeur de 1170px, il est peut-être préférable d'utiliser une largeur de 100% et une largeur maximale de 1160px, et l'élément parent pourrait avoir un remplissage horizontal de 5px, tant que la propriété box-sizing est définie sur border-box. Il existe de nombreuses façons de résoudre ce problème. Si l'élément parent n'est pas un conteneur flex ou grid, vous pouvez utiliser .container { margin: auto } .

Answer 3

Cela est également possible avec les %placeholders.

Les %placeholders peuvent être enveloppés dans des media queries. Vous pouvez ainsi configurer plusieurs variables à utiliser en fonction de la taille de l'écran, et les espaces réservés seront automatiquement prétraités en conséquence. Ici aussi, j'utilise des mixins pour raccourcir mes déclarations de requêtes média.

Dans votre fichier _vars.scss :

    $width-1: 960px;
    $width-2: 1160px;

Dans votre fichier _placeholders.scss :

    %variable-site-width                    { 
        @media screen and (max-width: 1170px)       { width: $width-1; }
        @media screen and (min-width: 1171px)       { width: $width-2; }
    }

Dans votre fichier page.scss :

    .wrapper.     { @extend %variable-site-width; background: red; etc... }

Et cela se compilera en quelque chose de similaire à :

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

Voilà !

J'utilise largement cette technique pour des choses comme les tailles de police variables et un tas d'autres choses.