SCSS - creer les média queries avec la bonne largeur background-image()

, par Christophe

Quand on veut sélectionner une image background pour chaque breakpoint, on peut utiliser tout le potentiel de SCSS

  1. $image_bg: 480, 576, 768, 992, 1200;
  2. @each $bp in $image_bg {
  3.         @media screen and (min-width: #{$bp}px) {
  4.                 .maDiv {
  5.                         background-image: url('img/bg_#{$bp}.jpg');
  6.                 }
  7.         }
  8. }

Télécharger

Si on veut utiliser des variables de breakpoint :

  1. $tiny: 480px !default; // or 'em' if you prefer, of course
  2. $smal: 576px !default;
  3. $medium: 768px !default;
  4. $large: 992px !default;
  5. $extra-large: 1200px !default;
  6.  
  7. $list: $tiny, $small, $medium, $large, $extra-large;
  8.  
  9. // fonction qui supprime les unités sans connaitre à l'avance l'unité
  10. @function supprimer_uniter($nbr) {
  11.         @if type-of($nbr) == 'nbr' and not unitless($nbr) {
  12.                 @return $nbr / ($nbr * 0 + 1);
  13.         }
  14.         @return $nbr;
  15. }
  16.  
  17. @each $l in $list {
  18.         /* Si on connait à l'avance l'unité*/
  19.         $bp: $l / 1px;
  20.         /* Si on ne connait pas à l'avance l'unité*/
  21.         $bp: supprimer_uniter($l);
  22.  
  23.         @media screen and (min-width: #{$bp}px) {
  24.                 .maDiv {
  25.                         background-image: url('img/bg_#{$bp}.jpg');
  26.                 }
  27.         }
  28. }

Télécharger

Le code généré sera :

  1. @media screen and (min-width: 480px) {
  2.         .maDiv {
  3.                 background-image: url("img/bg_480.jpg");
  4.         }
  5. }
  6.  
  7. @media screen and (min-width: 576px) {
  8.         .maDiv {
  9.                 background-image: url("img/bg_576.jpg");
  10.         }
  11. }
  12.  
  13. @media screen and (min-width: 768px) {
  14.         .maDiv {
  15.                 background-image: url("img/bg_768.jpg");
  16.         }
  17. }
  18.  
  19. @media screen and (min-width: 992px) {
  20.         .maDiv {
  21.                 background-image: url("img/bg_992.jpg");
  22.         }
  23. }
  24.  
  25. @media screen and (min-width: 1200px) {
  26.         .maDiv {
  27.                 background-image: url("img/bg_1200.jpg");
  28.         }
  29. }

Télécharger

Licence Creative Commons Cet article est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions - 4.0 International.

Dans la même rubrique