High DPI Sprites

[kevin-montrose]

The age of retina is here, and CSS that looks good on standard and high dpi displays at the same time is hard.

Some sort of extension to @sprite in combination with @media queries would be a real life saver.

Thinking something like:

@sprites('/img/my-sprites.png') {
  @up = '/img/up.png';
  @up only (min-resolution:200dpi) = '/img/up@2.png';
  etc.
}

Specifying multiple sprite files needs some thought, convention over configuration may be the way to go there.

Some thoughts (courtesy Sam Saffron) on high DPI: http://t.co/Y8EIxGNq ; can't really do much with vectors.

[kevin-montrose]

Alternative thought, a syntax for @sprite that says "this is a high dpi sprite, but also export low dpi ones".

Down-scaling is safer... don't know how designers would feel about giving up that control. Makes me a tad nervous.

[kevin-montrose]

Alternate syntax proposal:

@sprite{
  300dpi ('/img/spritex3.png'){
    @up = '...';
    @down = '...';
   }
   200dpi ('/img/spritex2.png'){
     @up = '...';
     @down = '...'; 
   }
   default ('/img/sprite.png'){
     @up = '...';
     @down = '...';
   }
}

Taking inspiration from @keyframes.

[kevin-montrose]

After some discussion, the immediately above proposal is a go.