$columns: 12;
.row:after{
    content: "";
    display: block;
    clear: both;
}
@mixin generate-spans($device-size){
    @for $i from 1 through $columns{
        .span-#{$i}-#{$device-size}{
            width: 100% / $columns * $i;
            float: left;
        }
    }
}

//mobile
@media (max-width: 640px){
    @include generate-spans(s);
}
//tablet
@media (min-width: 640px){
    @include generate-spans(m);
}
//desktop
@media (min-width: 1024px){
    @include generate-spans(l);
}