Variables SCSS插值不工作

我以前使用过sass插值，我一辈子都搞不懂为什么目标数据属性无法编译。它必须与引号有关……我尝试了双引号、单引号，并添加了@charset'UTF-8'；转到app.scss（这是一个很难实现的目标）

有什么想法吗？！我打赌这是件愚蠢的事。注意，class.test是如何通过的

@mixin grid-column {
@media #{$small-up} {
    @for $i from 1 through $column-count {
        .test { width: #{$i}; }
        &[data-small="#{$i}"] { width: grid-calc($i, $column-count); }
        }
    }
@media #{$medium-up} {
    @for $i from 1 through $column-count {
        &[data-medium="#{$i}"] { width: grid-calc($i, $column-count); }
        }
    }
@media #{$large-up} {
    @for $i from 1 through $column-count {
        &[data-large='#{$i}'] { width: grid-calc($i, $column-count); }
        }
    }       
}

汇编至：

.row .column .test {
  width: 1; }
.row .column[data-small="#{$i}"] {
  width: 8.33333%; }

---

呃,我想出来了。这是因为我在使用libsassP