css - 使用sass连接字符串

我想像这样编写一个Sass循环。

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

我希望输出是这样的，

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

不是

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

我正在寻找一个sass实用程序/函数，可以用来删除字符串周围的引号。

最佳答案

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

关于css - 使用sass连接字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51244750/