css - 在 SASS 百分比函数中使用变量

Question

由于某些原因，当我这样做时我的 SASS 没有编译:

假设这是我的全局变量:

$gridColumnCount: 12;

@function gridCalc($colNumber, $totalColumns) {
    @return percentage(($colNumber / $totalColumns));
}

@mixin columns($columnSpan: 1) {
    width: gridCalc($columnSpan, $gridColumnCount);
}

返回此错误，scss 文件未编译。

Syntax error: "1/12" is not a unitless number for `percentage'

它似乎不是在计算百分比，而是将参数作为字符串返回。

如果我将 mixin 更改为使用非变量参数，一切都会完美运行......就像这样:

@mixin columns($columnSpan: 1) {
    width: gridCalc(4, 12);
}

有谁知道我哪里出错了。

仅供引用:SASS 版本:3.2.2

Answer 1

感谢@Wesley Murch，我弄清楚了我的代码出了什么问题。我应该使用以下语法调用我的 mixin:

@for $i from 1 to $gridColumnCount {
    .span#{$i}, .mq-alpha-resize-to#{$i}  { @include columns($i);  }
}

不是这个:

@for $i from 1 to $gridColumnCount {
    .span#{$i}, .mq-alpha-resize-to#{$i}  { @include columns(#{$i});  }
}

原因是 SASS 是 interpolating数字。