SASSミキシング$ str問題

Question

私はグリッドシステムの列を作成するためにサスのミキシングを使用しています。しかし、私は出力に少し問題があります。

これは、.colクラスのmy sass関数です。あなたがスクリーンショットで見ることができるように。私がsassファイルをコンパイルした後、圧縮されたcssファイルには "///////"スラッシュが多すぎます。

.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); 
 
    } 
 
    } 
 
}

CSS出力

あなたは、CSSからこれらのスラッシュを取り除くためにどのように任意のアイデアを持っていますか？

ありがとうございました！

Answer 1

.col-#{$key}の範囲外にある行$str: "&";を移動してみてください。