Skip to content

Instantly share code, notes, and snippets.

@ZeeAgency

ZeeAgency/mixins.scss

Created December 4, 2012 13:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ZeeAgency/4204010 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ZeeAgency/4204010 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Zee Agency created this gist Dec 4, 2012.
    33 changes: 33 additions & 0 deletions mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    @mixin for-hidpi {
    .hidpi & {
    @content;
    }
    @media 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) {
    @content;
    }
    }

    // https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass
    @mixin sprite-bg($name, $sprite, $sprite2x: false) {
    background-image: sprite-url($sprite);
    background-position: sprite-position($sprite, $name);
    background-repeat: no-repeat;
    width: image-width(sprite-file($sprite, $name));
    height: image-height(sprite-file($sprite, $name));

    @if $sprite2x {
    @include for-hidpi {
    background-image: sprite-url($sprite2x);
    $pos: sprite-position($sprite2x, $name);
    background-position: nth($pos, 1) nth($pos, 2) / 2;

    // @include background-size(image-width(sprite-file($sprite, $name)) image-height(sprite-file($sprite, $name)));
    @include background-size(ceil(image-width(sprite-path($sprite2x)) / 2) auto);
    }
    }
    }
    10 changes: 10 additions & 0 deletions usage.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    $social-sprite: sprite-map("sprites/socials-lodpi/*.png", $spacing: 1px);
    $social-sprite-2x: sprite-map("sprites/socials-hidpi/*.png", $spacing: 2px);

    @mixin social-sprite-bg($name) {
    @include sprite-bg($name, $social-sprite, $social-sprite-2x);
    }

    .test-1 {
    @include social-sprite-bg(facebook);
    }