“I just wanted a blog. Instead, I summoned the Sass Kraken.” – Every Dev, Eventually
💻 Prologue: The Command That Opened Hell
There I was. Dim-lit terminal. Cold coffee. Full Linux power.
1
bundle exec jekyll serve
I hit Enter with the confidence of a hacker who’s installed Arch before.
Big mistake.
That innocent-looking line triggered a full-blown Sasspocalypse—undefined mixins, cryptic errors, and deprecation warnings that read like ancient curses.
Welcome to my chaotic chronicles. Buckle up.
⚔️ Chapter 1: First Blood — “Undefined Mixin”
Terminal screams in red:
1
2
Error: Undefined mixin.
119 │ @include prompt("tip", "\f0eb", 400);
Me: “Cool. Just a missing mixin. Should be a quick fix.”
LOL.
I dug through my SCSS like a digital archaeologist and finally found it—_sass/addon/module.scss had the prompt() mixin hiding like it owed me money.
Fix Attempt #1:
1
2
@use "module";
@include module.prompt("tip", "\f0eb", 400);
Result:
1
There is no module with the namespace "module".
Me: “Oh, you gotta be kidding me.”
🧠 The Enlightenment:
Turns out, Jekyll treats SCSS paths like riddles. I had to do this:
1
2
@use "addon/module" as module;
@include module.prompt("tip", "\f0eb", 400);
Sanity status: Unstable.
Progress: Made.
🧨 Chapter 2: The Sass Deprecation Warning That Wouldn’t Die
As if mixins weren’t enough, Sass dropped this passive-aggressive gem:
1
Deprecation Warning [mixed-decls]: declarations after nested rules will be changing...
Translation: “Fix your CSS, peasant.”
Offending code:
1
2
3
4
@media (prefers-color-scheme: light) {
// nested styles
}
font-size: 16px; // NOPE ❌
The Fix?
Either:
Move
font-sizeabove the@media,or
Wrap it like a Christmas gift from someone who hates you:
1
2
3
& {
font-size: 16px;
}
I went with Option 1 because my CSS shouldn’t need a gift wrapper.
🌀 Chapter 3: The Infinite Loop of Mixins
Just when I thought I was free:
1
2
Error: Undefined mixin.
268 │ @include label(inherit);
Again?! I JUST FIXED THIS!
So here’s the thing. You have two choices with @use:
@use "module" as module;→ Use mixins likemodule.label()@use "module" as *;→ Use mixins likelabel()
I was mixing both styles like a bad margarita.
🛠️ Final Fix:
1
2
@use "addon/module" as module;
@include module.label(inherit);
Pro tip: Pick a style and commit like it’s a relationship. 💍
☠️ Chapter 4: The Final Boss – $footer-height
Ah, just one more build. Right? WRONG.
1
2
Error: Undefined variable.
157 │ height: $footer-height;
Me: “You have got to be kidding.”
Variable? It existed.
Location? _sass/addon/variables.scss
Issue?
Jekyll wasn’t importing it.
I was screaming at my terminal like it was a disobedient dog.
💡 Final Fix:
1
@use "addon/variables" as *;
The * means: “Just bring everything. I’m tired. You’re tired. Let’s go.”
🎉 Epilogue: The Site Finally Built (But At What Cost?)
After:
- 37 Stack Overflow tabs
- 5 “quick fixes” that broke everything more
- 1 existential meltdown…
It. Finally. Worked.
My Jekyll blog built without errors.
I stared at the terminal like Frodo after throwing the ring into Mount Doom.
💡 Lessons from the Fire
- Sass @use is a control freak. It needs structure, like a bossy project manager.
- Deprecation warnings are soft threats that age into hard errors.
- grep -r is your sword. Learn it. Master it.
- Assume nothing. Especially with mixins.
🤖 Advice for Fellow Cyberdevs
bundle exec jekyll serve --trace→ Trace like a pro.- RTFM = Read The Freaking Mixin.
- When in doubt:
1
rm -rf .jekyll-cache && reboot life
🧬 Final Thought
If Jekyll and Sass were a movie, it’d be a horror-comedy—you’re both the victim and the punchline. But hey, if my suffering makes your path easier, I’ve done my job.
🚀 Until the next gem update breaks everything…
Stay sane, hackers.
And may your mixins always be defined. 😈
1
echo "Blog’s up, baby." >> /dev/terminal
💬 P.S.
If this gave you a laugh (or trauma flashbacks), share it. Misery loves company.
Follow me for more chaotic debugging sagas, cyber tricks, and terminal therapy.
arenredd.github.io
Your favorite cybersecurity dev with just enough patience to survive Jekyll.