concatenate strings using sass

Question

I would like to write a sass loop like so.

fractions: '';
@for $i from 1 through 4 {
    $fractions : $fractions + 1fr + '';
    .grid-#{$i} {
        grid-template-columns: fractions;
        display: block;
    }
}

I would like the output to be something like,

.grid-1 {
    grid-template-columns: 1fr; 
}
.grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr; 
}

not

.grid-1 {
    grid-template-columns: " 1fr"; 
}
.grid-4 {
    grid-template-columns: " 1fr 1fr 1fr 1fr"; 
}

I'm looking for a sass utility/function that I can use to remove the quote around the strings.

Answer 1

$fractions:'';
@for $i from 1 through 4 {
    $fractions : $fractions + 1fr + ' ';
    .grid-#{$i} {
        grid-template-columns: #{$fractions};
        display: block;
    }
}