フリーランスの忘備録

$maxCol:12;
$mediaBreakpoints:(
  'base':1px,
  'xs':450px,
  'sm':600px,
  'md':750px,
  'lg':900px,
  'xl':1024px
);
.flexbox{
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  box-sizing: border-box;
}
.flexitem{
  @each $media,$width in $mediaBreakpoints{
    @if ($media == 'base'){
      @for $i from 1 through $maxCol{
        @for $x from 1 through $maxCol{
          @if $i < $x or $i == 1 and $x == 1{
            &--#{$i}\/#{$x}{
              flex: 0 0 #{$i/$x*100%};
              width: #{$i/$x*100%};
              max-width: #{$i/$x*100%};
              box-sizing:border-box;
            }
          }
        }
      }
    }@else{
      @media (min-width:$width){
        @for $i from 1 through $maxCol{
          @for $x from 1 through $maxCol{
            @if $i < $x or $i == 1 and $x == 1{
              &--#{$i}\/#{$x}{
                &--#{$media}{
                  flex: 0 0 #{$i/$x*100%};
                  width: #{$i/$x*100%};
                  max-width: #{$i/$x*100%};
                  box-sizing:border-box;
                }
              }
            }
          }
        }
      }
    }
  }
}