cwebba1
KPCKevin Powell - Community
•Created by cwebba1 on 7/9/2023 in #back-end
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
1 replies
KPCKevin Powell - Community
•Created by cwebba1 on 12/31/2022 in #front-end
Before and After Sliding Panels
Have you ever seen those image displays where a bar slides back and forth over two images showing a before and after shot? What would you call that pattern?
I have an idea for a pair of articles that I would like to show together with the same affordance. Have you ever seen a Codepen or anything with that kind of sliding panel over text?
2 replies