Skip to content

Instantly share code, notes, and snippets.

@chriseppstein

chriseppstein/this_does_not_work.scss

Created May 31, 2013 23:08
Download ZIP

Revisions

  1. chriseppstein created this gist May 31, 2013.
    30 changes: 30 additions & 0 deletions this_does_not_work.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    @mixin clearfix {
    *zoom: 1;
    &:after {
    content: "";
    display: table;
    clear: both;
    }
    }

    @mixin generate-grid($cols, $width) {
    %grid-base {
    float: left;
    @include clearfix;
    }
    @for $i from 1 through $cols {
    .col-#{$i} {
    @extend %grid-base;
    width: $width * $i / $cols;
    }
    }
    }

    @media (all) and (min-width: 480px) {
    @include generate-grid(12, 720px);
    }

    @media (all) and (min-width: 800px) {
    @include generate-grid(24, 960px);
    }

    31 changes: 31 additions & 0 deletions this_works.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    @mixin clearfix {
    *zoom: 1;
    &:after {
    content: "";
    display: table;
    clear: both;
    }
    }

    @mixin generate-grid($cols, $width) {
    $base: unique-id();
    %#{$base} {
    float: left;
    @include clearfix;
    }
    @for $i from 1 through $cols {
    .col-#{$i} {
    @extend %#{$base};
    width: $width * $i / $cols;
    }
    }
    }

    @media (all) and (min-width: 480px) {
    @include generate-grid(12, 720px);
    }

    @media (all) and (min-width: 800px) {
    @include generate-grid(24, 960px);
    }