Generated by SassMeister.com.

input.scss

$grid-columns: 1;
$layoutBreakPoints: (
    "med-small" : 580px,
);

@each $name, $width in $layoutBreakPoints {
.u-col {
    @for $col from 1 through $grid-columns {
        &-test { 
            background: red ;
        }
        
        &-#{$col}--#{$name} {
            background: blue;
        }
        &-#{$col + '--' + $name} {
            background: yellow;
        }
        &#{'-' + $col + '--' + $name} {
          background: green;
        }        
        
    }
}
}        

output.css

.u-col-test {
  background: red;
}

.u-col-1--med-small {
  background: blue;
}

.u-col-1--med-small {
  background: yellow;
}

.u-col-1--med-small {
  background: green;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}