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
Kevin Powell
YouTube
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...
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
Sass Build Systems fail Sass variables – Help!
My multiple build systems for SASS fail to process Sass variables and mixins. I describe the issue and ask for help.
0 Replies