I'm currently using sass mixins to create columns in my grid system. However, I am facing an issue with the output.
Here is the sass function I am using for the .col class. Upon compiling the sass file, the generated css file contains excessive slashes like "///////" as shown in the screenshot.
.col-#{$key} {
$str: "&";
@for $i from 1 through $columns {
$str: $str + "," & + "-" + $i + "," + & + "-offset-" + $i;
}
@at-root #{$str} {
@include grid-column;
}
& {
@include grid-column-span(auto);
}
@for $i from 1 through $columns {
&-#{$i} {
@include grid-column-span($i);
}
&-offset-#{$i} {
@include grid-column-offset($i);
}
}
}The rendered CSS https://i.sstatic.net/QB33D.png
Any suggestions on how to remove these extra slashes from the css output?
Thanks in advance!