pfulton

.box {
  background: big-ass-data-uri-string-for-non-retina-hd-image;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
  .box {
    background: big-ass-data-uri-string-for-retina-hd-image;
  }
}

pfulton

/* THE BASE FILE WHERE YOU IMPORT ALL YOUR STUFF & MAYBE DO YOUR MEDIA QUERIES */

@import "mixins";

@media only screen and (min-width: 40.625em) {
	@import "lib/placeholders";
	@import "layout/medium";
}

pfulton

@mixin hd($defaultPath, $hdPath) {
  // the non-hd image - use data URI for this
  background-image: inline-image($defaultPath);
  // the IE fall-back for non-data URI support
  .lt-ie9 & {
    background-image: image-url($defaultPath);
  }
  // the HD version - use regular image path to prevent downloading non-hd version, too
  @media (-webkit-min-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-device-pixel-ratio: 1.5) {
    background-image: image-url($hdPath);

pfulton

Solspace: http://www.solspace.com
Pixel & Tonic: http://pixelandtonic.com/
Low: http://gotolow.com/
Stash: https://github.com/croxton/Stash

----

Helpful posts:

Viget has some great EE-related posts. Just Google for them, or start here:

pfulton

AL
AK
AZ
AR
CA
CO
CT
DE
DC
FL

pfulton

Sass and Compass Resources

=====================================================

***ONLINE***

> Official: http://sass-lang.com
> Official: http://compass-style.org
> http://thesassway.com

pfulton

// for the life of me, I can't track down the original place where I found this.

// syntax for scale mixin is like this
// property, sizes in px, context
//@include scale(padding, (16, 14, 12, 9), 20);
// 16px is default context size

@mixin scale($props, $sizes, $base: 16) {
	$values: ();
	$sublists: false;

pfulton

// quick relative font-sizing mixin.
// I wrote this before finding Anthony Short's awesome StitchCSS gem: https://github.com/anthonyshort/stitch-css/
// his relative font-sizing function is here: https://github.com/anthonyshort/stitch-css/blob/master/stylesheets/stitch/patterns/text/_rem.scss

$base-font-size: 16px;

@mixin font-sizer($font-size, $base-font-size) {
	font-size: ($font-size / $base-font-size) * 1em;
}