scss 用于SCSS的Retina Mixin

Posted 2021-05-18

// Retina
$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";

@mixin retina-background-image($file, $type, $width, $height) {
	background-image: url($file + '.' + $type);
	background-size: $width $height;
	@media #{$retina} {
		background-image: url($file + '@2x.' + $type);
	}
}