SASS mixing $ str issue

Question

그리드 시스템의 컬럼을 생성하기 위해 사스 믹싱을 사용하고 있습니다. 하지만 출력에 약간의 문제가 있습니다.

이것은 .col 클래스의 기능입니다. 스크린 샷에서 볼 수 있듯이 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: "&"; 줄을 이동하십시오.