在 SASS 百分比函数中使用变量答案

【问题标题】：Using variables in SASS percentage function在 SASS 百分比函数中使用变量
【发布时间】：2012-11-12 14:10:44
【问题描述】：

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

假设这是我的全局变量：

$gridColumnCount: 12;

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

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

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

语法错误：“1/12”不是“百分比”的无单位数

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

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

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

有谁知道我哪里出错了。

仅供参考：SASS 版本：3.2.2

【问题讨论】：

嗯...使用online compiler 为我工作。你实际上是如何使用mixin的？听起来你在传递一个错误的论点。
现在这样：@for $i from 1 to $gridColumnCount { .span#{$i}, .mq-alpha-resize-to#{$i} { @include columns(#{$i}); } }
但是使用在线测试仪，我看到columns(#{$i});应该是这样的，而不是columns($i);

标签： css sass

【解决方案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 的数字。

【讨论】：