scottkellum

@media all and (min-width: 500px) { img { background-image: url('http://tmp.pgdn.us/b.jpg'); padding-top: 100px; height: 0 }}
@media all and (min-width: 600px) { img { background-image: url('http://tmp.pgdn.us/c.jpg') }}
@media all and (min-width: 700px) { img { background-image: url('http://tmp.pgdn.us/d.jpg') }}
@media all and (min-width: 800px) { img { background-image: url('http://tmp.pgdn.us/e.jpg') }}
@media all and (min-width: 900px) { img { background-image: url('http://tmp.pgdn.us/f.jpg') }}

scottkellum

img { content: attr(url(src-lg)) }

scottkellum

img {
  width: 100%;
}

@media all and (min-width: 500px) { img { background-image: url('http://tmp.pgdn.us/b.jpg'); padding-top: 100%; height: 0; background-size: 100%; }}
@media all and (min-width: 600px) { img { background-image: url('http://tmp.pgdn.us/c.jpg') }}
@media all and (min-width: 700px) { img { background-image: url('http://tmp.pgdn.us/d.jpg') }}
@media all and (min-width: 800px) { img { background-image: url('http://tmp.pgdn.us/e.jpg') }}
@media all and (min-width: 900px) { img { background-image: url('http://tmp.pgdn.us/f.jpg') }}

scottkellum

SCSS

$breakpoint: 600px;

.foo {
  color: #333;
  width: 100%;
  @collect $breakpoint {
 width: 50%;

scottkellum

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: #666;
}

scottkellum

function compound($c1: 1, $c2: 1, $c3: 1, $c4: 1, $c5: 1, $c6: 1)
  $common-multiple: ($c1 * $c2 * $c3 * $c4 * $c5 * $c6)
  $compound-grid: ()
  $compound-counter: 1
  @for $i from 1 through $common-multiple
    $add-col: false
    @if $c1 !=1
      @if $i / $c1 == round($i / $c1)
        $add-col: true
    @if $c2 !=1

scottkellum

First I like to define modules.

.module {
  width: 300px;
  height: 200px;
}

Modifiers are classes that only modifies what it is paired with.

scottkellum

%box {
  width: 500px;
  height: 400px;
}

%box-border {
  border: 3px solid #f00;
}

%clearfix {

scottkellum

/* SINGULARITY -- http://singularity.gs/ */
/* line 12, ../sass/oocss-variable-padding.scss */
.baz {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url("../behaviors/box-sizing/boxsizing.php");
  overflow: hidden;
  *zoom: 1;
  width: 25%;

scottkellum

@media screen {
  .baz {
    bar: baz;
  }
}