Sass: how to properly compile @each loop result?

Question

Sass

I have sass code:

$sizes: s m
$cols: 3 4
$bpoints: 320 800

@each $size, $cols, $bpoint in zip($sizes, $cols, $bpoints)
    @media ( min-width:  #{ $bpoint }px )
        @for $col from 1 through $cols
            @each $s in $sizes
                @if index($sizes, $s) <= index($sizes, $size)
                    @if $col <= index($sizes, $s) + 1
                        .#{ $s - $col })
                            width: ((100% / $cols ) * $col) - 2%

which compile to css:

@media (min-width: 320px) {
  .s-1 {
    width: 31.33333%; }
  .s-2 {
    width: 64.66667%; }
  .s-3 {
    width: 98%; } }

@media (min-width: 800px) {
  .s-1 {
    width: 23%; }
  .m-1 {
    width: 23%; }
  .s-2 {
    width: 48%; }
  .m-2 {
    width: 48%; }
  .s-3 {
    width: 73%; }
  .m-3 {
    width: 73%; }
  .m-4 {
    width: 98%; } }

how can i fix my code to get this result?

@media (min-width: 320px) {
  .s-1 {
    width: 31.33333%; }
  .s-2 {
    width: 64.66667%; }
  .s-3 {
    width: 98%; } }

@media (min-width: 800px) {
  .s-1 .m-1 {
    width: 23%; }
  .s-2 .m-2 {
    width: 48%; }
  .s-3 .m-3 {
    width: 73%; }
  .m-4 {
    width: 98%; } }

Thanks :)

Answer 1

Declare a placeholder for the size outside the size loop, but inside the media query loop then inherit it in the size loop
%size1 { width: 23% }
.#{ $s - $col }) { @extend $size1; }