Skip to content

Add a mixin for 2x images #136

plapier opened this Issue Nov 12, 2012 · 6 comments

3 participants


I liked the simplicity of that mixin, but instead of having to write two lines, why not just call the mixin once?

@mixin retina-image($filename, $image-width, $image-height, $extension: ".png") {
    background-image: url($filename + $extension);
    height: $image-height;
    width: $image-width;

    @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
        background-image: url($filename + "2x" + $extension);
        background-size: $image-width $image-height;

Then getting the non-retina and retina image happens all in one line

.class {
    @include retina-image(file-name, 250px, 250px);

Just a thought.

dukex commented Nov 12, 2012

I think is a better idea add a optional param to custom 2x image path, only to be flexible

plapier commented Dec 21, 2012

Is it an undocumented standard to add an @ between filename and 2x: e.g. (snow@2x.png)?
I pushed the new mixin to a branch: #157

plapier commented Dec 21, 2012

@dukex and @JoshuaJones, can you take a look at the pull request and the comment I made there?

@plapier plapier closed this Dec 21, 2012
@plapier plapier reopened this Dec 21, 2012
plapier commented Dec 21, 2012

heh, whoops on the close button 😆

@plapier plapier closed this Feb 8, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.