CODEWITHSUNDEEP
csssass
Zander
Zander

Reputation: 2684

Using variables in SASS percentage function

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

Upvotes: 4

Views: 6209

Answers (1)

Zander
Zander

Reputation: 2684

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.

Upvotes: 4

Related Questions