Using variables in SASS percentage function

css, sass

Solution

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);  }
}

NOT this:

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

The reason was that SASS was interpolating the numbers.

Problem

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); } ``` This error is returned & the `scss` file does not compile. 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. 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. FYI: SASS version: 3.2.2

Original source