在SASS百分比函数中使用变量 [英] Using variables in SASS percentage function

问题描述

出于某种原因，我在执行此操作时无法编译SASS:

For some reason my SASS is not compiling when I do this:

假设这是我的全局变量:

Suppose this is my global variable:

$gridColumnCount: 12;

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

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

返回此错误& scss 文件无法编译.

This error is returned & the scss file does not compile.

语法错误:"1/12"不是百分比"的无单位数字

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

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

It seems to not be calculating the percentage but returning the arguments as a string.

如果我将mixin更改为使用非变量参数，那么一切都将正常运行...就像这样:

If I change the mixin to use non-variable arguments, everything works perfectly... like this:

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

有人知道我要去哪里了吗

Does anyone know where I'm going wrong.

仅供参考: SASS版本:3.2.2

推荐答案

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

Thanks to @Wesley Murch I figured out what was wrong with my code. I should have called my mixin using this syntax:

@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是对数字进行插值.

这篇关于在SASS百分比函数中使用变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！