pfulton

.container
  %h1 Better Media Queries in Sass
  
  %section.primary
    %h2 Primary Content Here!
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing lacinia mi eget aliquet. Nunc non hendrerit lectus. Vestibulum nulla quam, consectetur nec condimentum eget, adipiscing lacinia dui. Suspendisse faucibus semper diam, id accumsan nunc lobortis ac. Morbi ut luctus eros, et posuere mauris. Mauris aliquam, est in bibendum lacinia, nisi diam fringilla eros, ac porttitor nisi massa sed lorem.
    %p Ut vel est nisl. Donec laoreet laoreet felis, ac imperdiet ligula faucibus eget. Vivamus nec sem ornare, cursus nisi eu, molestie nisi. Ut pretium arcu in tincidunt cursus. Proin vehicula magna urna, eu auctor nisl rhoncus viverra. Phasellus eu justo non urna sollicitudin aliquam.
    %h3 Yet Another Heading
    %p Nullam consectetur et nisi at aliquam. Nullam tempor lacinia aliquet. Aenean luctus ipsum a congue interdum. Etiam rutrum lorem at magna dignissim, non eleifend libero hendrer

pfulton

/**
 * Handlebars Helpers for Pattern Lab
 * Copyright (c) 2014 Jon Schlinkert
 * Licensed under the MIT License (MIT).
 */
'use strict';

var path = require('path');
var file = require('fs-utils');
var _ = require('lodash');

pfulton

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@mixin icon-base {
  background-size: contain;
  display: inline-block;
  height: 18px;
  width: 18px;

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;
}

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

AL
AK
AZ
AR
CA
CO
CT
DE
DC
FL

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

@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

/* 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

.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;
  }
}