Skip to content

Instantly share code, notes, and snippets.

@Pickra

Pickra/SassMeister-input.scss

Last active July 29, 2017 20:11
Show Gist options
  • Save Pickra/2d65c178994b373f5ebb776142148783 to your computer and use it in GitHub Desktop.
Save Pickra/2d65c178994b373f5ebb776142148783 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
@mixin background-image-retina($type, $file, $color, $ext) {
background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}.#{$ext}');
background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '.' + $ext);
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-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){
& {
background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}@2x.#{$type}');
background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '@2x.' + $type);
}
}
}
.hey { @include background-image-retina(icon, close, black, png); }
Raw
SassMeister-output.css
.hey {
background-image: url("src/assets/images/icon/close-black.png");
background-image: url("src/assets/images/icon/close-black.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-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) {
.hey {
background-image: url("src/assets/images/icon/[email protected]");
background-image: url("src/assets/images/icon/[email protected]");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment