Global (static) number sass variable

Question

We have an Angular application with multiple inner libraries, and some global scss files with styles and variables, which we use in all or multiple of our components's scss files.

I'm currently working on a component where I have the following scss with a ranged @for-loop:

:host {
  display: grid
}

.parent{
  ... // more irrelevant styling

  @for $i through 6 { // TODO: Change 6 to global variable
    &.col-span-${$i} {
      grid-column: span $i/span $i;
      color: limegreen; // TODO: remove, just for debug purposes
    }
  }
}

And where I for example (programmatically in Angular's TypeScript) add col-span-4 as class to the div of my component's html-template.

Now I want to change this 6 in the scss to a global variable, which is in an _variables.scss file of a different library.

Sounds straight-forward enough, but unfortunately I've been unable to find something that works..

Here some of the things I've tried:

1) With regular global css variable:

--my-var: 6; // within `html { ... }` block of _variables.scss

@for $i through var(--my-var) { // in component's scss at TODO above

This doesn't work, because it'll give an var(--my-var) is not a number. sass compilation error.

2) With sass variable:

$my-var: 6; // in _variables.scss

@for $i through $my-var { // in component's scss at TODO above

This doesn't work, because it'll give an Undefined variable. sass compilation error, including Element 'my-var' is resolved only by name without use of explicit imports IntelliJ warning.

3) With a combination of both variable types:

$my-var: 6; // in _variables.scss
--my-var: $my-var; // within `html { ... }` block of _variables.scss

@for $i through var(--my-var) { // in component's scss at TODO above

But then I'll still get the same error as option 1.

4) Based on the IntelliJ warning of option 2, I've tried changing it to:

$my-var: 6; // in _variables.scss

@use "../../form-main/src/scss/variables"; // at top component's scss

@for $i through variables.$my-var { // in component's scss at TODO above

This doesn't work, because it'll give an Can't find stylesheet to import. sass compilation error, likely because of the ../ path usage? (I'm not sure why this import fails, since IntelliJ's autocomplete can find this path just fine..)

5) With an ugly custom function to convert a string to number..

--my-var: 6; // within the `html { ... }` block of _variables.scss

@for $i through to-number(var(--my-var)) { // in component's scss at TODO above

And this at the top of my component's scss:

// Taken from https://stackoverflow.com/a/47633235/1682559
@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error 'Value for `to-number` should be a number or a string.';
  }

  $result: 0;
  $digits: 0;
  $negative: str-slice($value, 1, 1) == '-';
  $numbers-map: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($negative, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if (index(map-keys($numbers-map), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1;
      } @else if $digits == 0 {
        $result: $result * 10 + map-get($numbers-map, $character);
      } @else {
        $digits: $digits * 10;
        $result: $result + map-get($numbers-map, $character) / $digits;
      }
    }
  }

  @return if($negative, -$result, $result);
}

And although I no longer get any compilation nor IntelliJ errors, it still doesn't work, since I don't see the grid-column nor color style if I put col-span-4 for example on my div. Although even if it had worked, I can't put this to-number function in a global file, since I will get the same errors as most of the options for that function instead of the variable; and leaving this to-number utility method within the component kinda defeats the purpose of a global variable instead of hard-coded one in the first place..

So, does anyone know any type of global (static) variable or work-around I could use within my component's scss's @for loop, which requires a sass-number?

PS: We'll likely change the multiple libraries within our application to multiple modules soon, although I've already tested it, and all of the problems above will still occur (including option 4 with the import; I had the hope it might give issues due to the multiple libraries, but apparently not) in an application without multiple libraries.

---

EDIT: Tried something more:

6) Changing the for-loop with numbers to a while-loop with strings:

$i: 0;
@while #{$i} != var(--my-var) {
  $i: $i + 1;

But it seems to be caught in an infinite loop for some reason. I tried logging the variable with @debug "My var: #{var(--my-var)}" to see why, but it'll literally print My var: var(--my-var) instead of My var: 6.
Because of this, I kinda begin to doubt if my loop with css-variable will work at all, even if I do manage to cast it to a number, since it seems as if sass is compiled and run completely before any css-variables. This might also explain why option 5 above failed, since it couldn't convert the literal string "var(--my-var)" to a number, and the to-number function returned 0.. :/

If only it was possible to have a globally defined sass-variable instead of css-variable, which can be used within an Angular component's scss (aka options 2 or 4, but with working import).

---

EDIT 2: I've finally get it to 'work', using option 4 above with a slightly different import (two additional ../):

7)

$my-var: 6; // in _variables.scss

@use "../../../../form-main/src/scss/variables"; // at top component's scss

//@debug "Test: #{variables.$my-var}";
@for $i through variables.$my-var { // in component's scss at TODO above

This does seem to work (in my local environment at least), although I do get a Cannot resolve file 'variables' IntelliJ error at the @use-import and Cannot find variable 'max-columns-grid-display' IntelliJ warning at the $my-var, which I'm not too happy about..
Based on those path IntelliJ errors, I'm also unsure whether this would work in a non-local environment (aka on a test or production server). Will see if I have some time to test that later today or next week.

A solution without IntelliJ errors/warnings when using global sass-variables would still be very welcome.