Sass Mixin Grid System

index.pug

h1 Sass mixin Grid

.container AAA
  .row
    .w-1 .w-1
    .w-3 .w-3
    .w-3 .w-3
    .w-5 .w-5
  .row
    .w-sm-2 .w-sm-2
    .w-sm-2 .w-sm-2
    .w-sm-8 .w-sm-8
  .row
    .w-md-2 .w-md-2
    .w-md-2 .w-md-2
    .w-md-8 .w-md-8
  .row
    .w-lg-2 .w-lg-2
    .w-lg-2 .w-lg-2
    .w-lg-8 .w-lg-8
  .row
    .w-xl-2 .w-xl-2
    .w-xl-2 .w-xl-2
    .w-xl-8 .w-xl-8
  .row
    .w-12 .w-12
      .row
        .w-1 w-1
        .w-2 w-2
        .w-7 w-7
        .col col
      .row
        .col col
        .w-10 w-10

sass-mixin-grid-system.markdown

Sass Mixin Grid System

A Pen by Pistol on CodePen.

License.

script.babel

// https://alexcambose.ro/40-lines-of-Sass/
// Standard Version
/*
$grid-rows: 12
$sizes: (sm 480px, md 768px, lg 992px, xl 1200px)
$prefix: 'w'
$padding: 6px 4px
.container
  margin: 0 auto
.row
  display: flex
  flex-wrap: wrap
  > div[class*='#{$prefix}-']
    padding: $padding
    box-sizing: border-box
  > div:not([class*='#{$prefix}-'])
    flex: 1
    padding: $padding
  @for $i from 1 through $grid-rows
    .#{$prefix}-#{$i}
      flex-basis: $i / $grid-rows * 100%
    .#{$prefix}-offset-#{$i}
      margin-left: $i / $grid-rows * 100%
    @each $sizeLabel, $value in $sizes
      [class*='#{$prefix}-offset-#{$sizeLabel}-']
        margin-left: 0
      .#{$prefix}-#{$sizeLabel}-#{$i}
        flex-basis: 100%
  @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end)
    > div[class*='#{$prefix}-'].#{$classLabel}
      align-self: $cssValue
  @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end, space-around space-around, space-between space-between)
    &.#{$classLabel}
      justify-content: $cssValue
@each $sizeLabel, $value in $sizes
  @media only screen and (min-width: #{$value})
    @for $i from 1 through $grid-rows
      .row > .#{$prefix}-#{$sizeLabel}-#{$i}
        flex-basis: $i / $grid-rows * 100%
      .row > .#{$prefix}-offset-#{$sizeLabel}-#{$i}
        margin-left: $i / $grid-rows * 100%
    .container
      width: if(index($sizes,$sizeLabel $value) > 2, $value, 99%)
      
*/

style.sass

*
  box-sizing: border-box
  margin: 0
h1  
 font-weight: 100

$breakpoints: (sm:480px, md:768px,lg:1024px,xl:1280px)
  
.container
  margin: 0 auto

.row
  display: flex
  flex-wrap: wrap
  > div[class*='w-']
    padding: 0.5em
    box-sizing: border-box
  > div:not([class*='w-'])
    flex: 1
    padding: 1.5em
  @for $i from 1 through 12
    .w-#{$i}
      flex-basis: $i / 12 * 100%
    @each $sizeLabel, $value in $breakpoints
      .w-#{$sizeLabel}-#{$i}
        flex-basis: 100%

@each $sizeLabel, $value in $breakpoints
  @media only screen and (min-width: #{$value})
    @for $i from 1 through 12
      .row > .w-#{$sizeLabel}-#{$i}
        flex-basis: $i / 12 * 100%
    .container
      width: if(index(($breakpoints),$sizeLabel $value) > 2, $value, 99%)

    
// 本体外 装飾
.row
  background-color: #999  
  >div    
    border: 1px solid #ccc
    background-color: #eee