强制 SASS 不计算变量的内容？答案

【问题标题】：Force SASS to not calculate the content of a variable?强制 SASS 不计算变量的内容？
【发布时间】：2018-11-09 06:24:05
【问题描述】：

我有这个问题吗？

我正在尝试以这种格式将 mxin 用于网格行和网格列：

@mixin grid-row($row){
    grid-row: $row;
    -ms-grid-row: $row;
}

@mixin grid-column($column){
    grid-column: $column;
    -ms-grid-column: $column;
}

但如果我使用像 1/3 这样的值，SASS 会计算该值而不是直接打印该值。

编译后的css结果为：

grid-row: 0.3333333333;
-ms-grid-row: 0.3333333333;
grid-column: 0.3333333333;
-ms-grid-column: 0.3333333333;

有一种方法可以强制 SASS 直接打印此值（如字符串）？

非常感谢！

【问题讨论】：

标签： css sass grid mixins css-grid

【解决方案1】：

现在我就是这样做的，效果很好：

@mixin grid-row ($init, $end: null) {

    @if ($end) {
        grid-row: #{$init + " / " + $end};
        -ms-grid-row: #{$init + " / " + $ end};
    }

    @else {
        grid-row: $init;
        -ms-grid-row: $init;
    }

}

@mixin grid-column ($init, $end: null) {
    @if ($end) {
        grid-column: #{$ init + " / " + $end};
        -ms-grid-column: #{$init + " / " + $end};
    }

    @else {
        grid-column: $init;
        -ms-grid-column: $init;
    }
}

我仍然想知道是否有办法强制 SASS 不计算变量的内容。

谢谢！

【讨论】：

【解决方案2】：

您可以使用interpolation 来做到这一点，只需输入像#{"value"} 这样的值

@mixin grid-row($row){
    grid-row: $row;
   -ms-grid-row: $row;
}

@mixin grid-column($column){
    grid-column: $column;
    -ms-grid-column: $column;
}

.item {
  @include grid-row(#{"1/3"});
  @include grid-column(#{"1/2"});
}

结果会这样

.item {
  grid-row: 1/3;
  -ms-grid-row: 1/3;
  grid-column: 1/2;
  -ms-grid-column: 1/2;
}

【讨论】：