create sass version

[mknadler]

I might start taking a crack at this tonight

[mknadler]

Am I correct in thinking that the idea for the Sass version is: maintain the same usage (adding classes to HTML), but provide settings and so forth?

[dnomak]

@mknadler examine code :)

@mixin breakpoint($class) {

  @if $class == xs {
    @content;
  }

  @else if $class == sm {
    @media (min-width: 415px) { @content; }
  }

  @else if $class == md {
    @media (min-width: 668px) { @content; }
  }

  @else if $class == lg {
    @media (min-width: 769px) { @content; }
  }

  @else if $class == xl {
    @media (min-width: 1025px) { @content; }
  }

  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl";
  }

}

ul{
  @include wrap;

  @include breakpoint(xs) {
    $gutter: 2;
  }
  @include breakpoint(sm) {
    $gutter: 5;
  }
  @include breakpoint(md) {
    $gutter: 10;
  }
  @include breakpoint(lg) {
    $gutter: 15;
  }
  @include breakpoint(xl) {
    $gutter: 20;
  }
}

ul li {
  @include breakpoint(xs) {
    $row: 2;
    $col: 1;
  }
  @include breakpoint(sm) {
    $row: 3;
    $col: 1;
  }
  @include breakpoint(md) {
    $row: 12;
    $col: 6;
  }
  @include breakpoint(lg) {
    $row: 6;
    $col: 1;
  }
  @include breakpoint(xl) {
    $row: 5;
    $col: 1;
  }
}

[dnomak]

@mknadler have you checked ?

[mknadler]

@dnomak My first thought: I'm not sure if passing configuration with variables inside of an included mixin (e.g. @include breakpoint(xs) { $row: 2; $col: $1} is going to be the best approach? I think that if I were using this GS for the first time, and I saw that I needed to explicitly call $row and $col each time I used it, I'd probably move on to a simpler-to-implement system.

Also, can you clarify what $row and $col are intended to do, here? is the user setting height with $row?

[dnomak]

@mknadler that should be used :)

// Example 1

ul {
  @include wrap;
  // @include wrap(flexbox);

  @include center(lg);
  @include left(md);
  @include right(sm);

  @include reverse(lg);
  @include reverse(sm);

  @include gutter(xs, 2);
  @include gutter(sm, 5);
  @include gutter(md, 10, out);
  @include gutter(lg, 15);
  @include gutter(xl, 20);
}

ul li {
  @include fisrt(lg);
  @include last(md);

  @include column(xs, auto);
  @include column(sm, hidden);
  @include column(md, 12, 6);
  @include column(lg, 5,1);
  @include column(xl, 1);
}

// Formule
// width : 100%; (xl - li)
// width : calc(100% / 5 * 1); (lg - li - row: 5 col: 1)
// width : calc(100% / 12 * 6); (md - li - row: 12 col: 6)
// display : none; (sm - li)
// width : auto; (xs - li)

// Example 2

section {
  @include wrap;
  aside {
    @include column(lg, 12, 3);
  }
  article {
    @include column(lg, 12, 9);
  }
}

// Formule
// width : calc(100% / 12 * 3); (lg - aside - row: 12 col: 3) 
// width : calc(100% / 12 * 9); (lg - article - row: 12 col: 9)

http://css-tricks.com/a-couple-of-use-cases-for-calc/