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, $columns) {
  @include breakpoint($breakpoint) {
    $zen-columns: $columns !global;
    @content;
  }
}

// Breakpoints
$narrow: 420px; // 30em 6
$tablet: 560px; // 40em 8
$computer: 728px; // 52em 12
$wide: 910px; // 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 $computer, 8) {
        @include zen-grid-item(4, 1);
        background: red;
      }
    }
    &:nth-child(3n + 2) {
      @include at-breakpoint($tablet $computer, 8) {
        @include zen-grid-item(4, 5);
        background: lightblue;
      }
    }
    &:nth-child(3n) {
      @include zen-new-row();
      @include at-breakpoint($tablet $computer, 8) {
        @include zen-grid-item(4, 1);
        background: lightgreen;
      }
      @include breakpoint($computer) {
        clear: none;
      }
    }
  }
}