mr_grembly

Untitled

Mar 22nd, 2018
300
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #thegrid {
  2.    .test {
  3.        color: red;
  4.    }
  5.    .test-row{
  6.        display: grid;
  7.        grid-template-columns: repeat(12, 1fr);
  8.            max-width: 1200px;
  9.    }
  10.    .test-column, .test-columns{
  11.        padding: 0 1rem;
  12.    }
  13.    
  14.    // Sizes-list-media
  15.    $sizes-list: (
  16.        "small": ("(min-width: 320px) and (max-width: 640px)"),
  17.        "medium": ("(min-width: 640px) and (max-width: 1024px)"),
  18.        "large": ("(min-width: 1024px)")
  19.    );
  20.  
  21.    $columns-list: 1 2 3 4 5 6 7 8 9 10 11 12;
  22.    
  23.    @each $current-column in $columns-list {
  24.        $i: index($columns-list, $current-column);
  25.        $sizes: map-keys($sizes-list);
  26.        @each $size in $sizes {
  27.            $thekey: map-get($sizes-list, $size);
  28.            @media #{$thekey} {
  29.                .test-#{$size}-#{$i} {
  30.                    grid-column: span #{$i};
  31.                }
  32.            }
  33.        }
  34.    }
  35. }
RAW Paste Data