@each $size, $cols, $bpoint in zip($sizes, $cols, $bpoints)
@media ( min-width: #{ $bpoint }px )
@for $col from 1 through $cols
.#{ $size - $col }
width: ((100% / $cols ) * $col) - 2%
@each $s in $sizes
@if index($sizes, $s) < index($sizes, $size)
@if $col <= index($sizes, $s) + 1
.#{ $s - $col }
@extend .#{ $size - $col }
@each $size, $cols, $bpoint in zip($sizes, $cols, $bpoints)
@media ( min-width: #{ $bpoint }px )
@for $col from 1 through $cols
%width
width: ((100% / $cols ) * $col) - 2%
@each $s in $sizes
@if index($sizes, $s) <= index($sizes, $size)
@if $col <= index($sizes, $s) + 1
.#{ $s - $col }
@extend %width
Compilation Error
Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.