Passing local variables as args to function with SASS

Question

I am attempting to perform a calculation for width within my SASS CSS, however I can't seem to get it working with local variable as defined in the format --myVariable.

I know this can be done with global variables, however I am changing the value of the variable depending on media query screen width.

Am I missing something?

@function calcWidth($numCols, $gap) {
    @return @return (1 / $numCols * 100%) - ((1 - (1 / $numCols)) * $gap);
}

...

.my-selector {
    --cols: 3;
    --gap: 16px;

    @media (--from-tablet-size) { // Custom defined screen size
        --cols: 1;
        --gap: 1;
    }

    width: calcWidth(#{--cols}, #{--gap});
    // I have also tried calcWidth(--cols, --gap) with the same outcome
}

The error I am getting when trying to load the page is:

SassError: Undefined operation: "1/--cols times 100%".
        on line 6 of src/.../myFile.scss, in function `calcWidth`
        ...
>>   @return (1/$numCols * 100%) - ((1 - (1/$numCols)) * $gap);

UPDATE I found, through using @debug that it seems the values of my --myVar style local variables aren't being sent through, but are being sent as the string --myVar instead... That would be an issue!

I'm not sure how to get around this now...