create sass version about flexiblegs-scss-plus HOT 6 CLOSED

@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;
  }
}

// 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)