Sass Build Systems fail Sass variables – Help!

I am working on an introduction to CSS Trigonometry tutorial by Kevin Powell. https://youtu.be/eO33Rh3GFGk

Everything works until the end of the tutorial where Kevin Powell demonstrates a Sass mixin to automatically process a series of CSS declarations.

I get an error that looks like this:

Error: Undefined variable.
|
171 | .circle:nth-of-type(#{$i + 1}) {
| ^^
|
src/scss/trig.scss 171:27 root stylesheet

I tracked down a live example of Kevin Powell's code example on Codepen here: https://codepen.io/kevinpowell/pen/qBMQJVr

The exact same code works on his CodePen file. Reading CodePen documentation, I found a Sass testing playground at https://www.sassmeister.com/. Kevin Powell's code also compiles correctly there.

Therefor there must be a defect with my build system(s). I tested three.

I tested one development system that uses NPM directly, one that uses Gulp, and one build system for Eleventy that does not use Gulp. All three give the same Undefined variable error.

My Sass build systems successfully process Sass partials and compile them to CSS. They are failing to process Sass mixins and variables.

I will list the package.json contents and pertinent portions of the three development systems on my eleventy blog. My question is what are the differences between CodePen or Sassmeister and my build systems where my Sass mixins and variables fail to process?

Here is the link:
https://relaxed-eclair-7593c6.netlify.app/blog/sass-build-fail-need-help.html

YouTubeKevin Powell

CSS Trigonometry is surprisingly useful

I'm working on a course that covers Sass in real world situations, and a lot more: https://beyondcss.dev

Trigonometry is here in CSS with sin(), cos(), and tan(), as well as a few others. I kept seeing a lot of people excited for these, but I didn't really get why for a long time, but I found a good use case for sin() and cos() and wanted to sh...