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

时间:2012-11-24 14:29:41

标签: css sass

出于某种原因,当我这样做时,我的SASS没有编译:

假设这是我的全局变量:

$gridColumnCount: 12;

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

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

返回此错误&amp; <{1}}文件无法编译。

  

语法错误:“1/12”不是“百分比”

的无单位数

似乎没有计算百分比,而是将参数作为字符串返回。

如果我将mixin改为使用非变量参数,那么一切都很完美......就像这样:

scss

有谁知道我哪里出错了。

仅供参考: SASS版本:3.2.2

1 个答案:

答案 0 :(得分:2)

感谢@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数字。