screen.scss

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass/reset";

@import "zen-grids";
@import "breakpoint";

@mixin at-breakpoint($breakpoint) {
  @include breakpoint(nth($breakpoint, 1)) {
    $zen-columns: nth($breakpoint, 2) !global;
    @content;
  }
}

// Breakpoints
$narrow: 420px 6; // 30em 6
$tablet: 560px 8; // 40em 8
$computer: 728px 12; // 52em 12
$wide: 910px 12; // 65em 12

$legacy-support-for-ie7: false !default;
$legacy-support-for-ie6: false !default;

// Zen grids
$zen-gutter-method: margin;
$zen-columns: 4 !global;
$zen-gutters: 1.7% !global;
@include breakpoint($narrow) {
  $zen-columns: 6 !global;
}
@include breakpoint($tablet) {
  $zen-columns: 8 !global;
}
@include breakpoint($computer) {
  $zen-columns: 12 !global;
}
@include breakpoint($wide) {
  $zen-columns: 12 !global;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 $zen-gutters;
  @include zen-grid-container();
  background-color: #eee;

  .column {
    &:nth-child(3n + 1) {
      @include at-breakpoint($tablet) {
        @include zen-grid-item(4, 1);
        background: red;
      }
    }
    &:nth-child(3n + 2) {
      @include at-breakpoint($tablet) {
        @include zen-grid-item(4, 5);
        background: lightblue;
      }
    }
    &:nth-child(3n) {
      @include zen-new-row();
      @include at-breakpoint($tablet) {
        @include zen-grid-item(4, 1);
        background: lightgreen;
      }
      @include breakpoint($computer) {
        clear: none;
      }
    }
  }
}