使用sass连接字符串

时间:2018-07-09 11:41:38

标签: css sass grid

我想像这样编写一个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实用程序/函数,可以用来删除字符串周围的引号。

1 个答案:

答案 0 :(得分:2)

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