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

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

Si on veut utiliser des variables de breakpoint :

$tiny: 480px !default; // or 'em' if you prefer, of course
$smal: 576px !default;
$medium: 768px !default;
$large: 992px !default;
$extra-large: 1200px !default;

$list: $tiny, $small, $medium, $large, $extra-large;

// fonction qui supprime les unités sans connaitre à l'avance l'unité
@function supprimer_uniter($nbr) {
	@if type-of($nbr) == 'nbr' and not unitless($nbr) {
		@return $nbr / ($nbr * 0 + 1);
	}
	@return $nbr;
}

@each $l in $list {
        /* Si on connait à l'avance l'unité*/
        $bp: $l / 1px;
        /* Si on ne connait pas à l'avance l'unité*/
	$bp: supprimer_uniter($l);

	@media screen and (min-width: #{$bp}px) {
		.maDiv {
			background-image: url('img/bg_#{$bp}.jpg');
		}
	}
}

Le code généré sera :

@media screen and (min-width: 480px) {
	.maDiv {
		background-image: url("img/bg_480.jpg");
	}
}

@media screen and (min-width: 576px) {
	.maDiv {
		background-image: url("img/bg_576.jpg");
	}
}

@media screen and (min-width: 768px) {
	.maDiv {
		background-image: url("img/bg_768.jpg");
	}
}

@media screen and (min-width: 992px) {
	.maDiv {
		background-image: url("img/bg_992.jpg");
	}
}

@media screen and (min-width: 1200px) {
	.maDiv {
		background-image: url("img/bg_1200.jpg");
	}
}
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