I revisited Codecademy's "Learn Sass" class for a quick review and also to check out new material added since my first run. I'm also a Codecademy Pro subscriber this time, which opened up the practice project assignments. The lessons went fine, but the projects did not. The learning environment was supposed to automatically compile SCSS to CSS every time I hit "Run". But it was quickly obvious that changes I made to SCSS file were not being reflected in the corresponding CSS file nor visible in HTML. Is it another back-end failure like what foiled my Codecademy MongoDB course? Some debugging later, I figured out the problem: if I make a mistake in the SCSS file and create invalid Sass syntax, the background compiler runs and fails. This is a part of learning and is OK. What is NOT OK is the fact it silently fails without showing me an error message. This infuriating behavior is not the first time Codecademy did this to me. Fortunately, this time project material is easy enough for me to port elsewhere.

The quickest and easiest (if not the most efficient) way to do this was to fire up Visual Studio Code and tell it to build me a dev container. I could replicate most of this functionality on my own, launching a Node.js Docker container instance and mapping a volume to my GitHub repository working directory. But by using a published configuration file for Node.js JavaScript projects, I was up and running in a half dozen mouse clicks and much quicker than doing it on my own. After the container was up and running, I followed Sass installation directions to run npm install -g sass. Now I could run sass compiler myself and get error messages to help me fix my mistakes.

Even with that, though, I'm not out of the woods. This course is several years old and shows signs of lacking maintenance. One project stumbled into deprecated behavior that generated compile-time warnings.

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($tons-produced, 3) or calc($tons-produced / 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
54 │     height: #{$tons-produced/3}px;
   │               ^^^^^^^^^^^^^^^^
   ╵
    main.scss 54:15  root stylesheet

Fortunately fixing this one is fairly easy, following the recommendation to wrap the calculation inside a call to calc(). But then it gets worse: we get a non-obvious error.

Error: Undefined operation "null % 3".
   ╷
56 │     @if($i % 3 == 0){
   │         ^^^^^^
   ╵
  main.scss 56:9  root stylesheet

I understand the intent of the project, but I don't know why this code isn't working. Even after I copied directly from the answer key to verify I'm not just making a silly typo somewhere. $i was defined in the @each loop and we could use at the top level of the loop successfully. But this line is in an inner scope and using $i is an error here. My hypothesis is that I stumbled into a Sass breaking change regarding variable scopes.

Even if I ignore these technical errors, I'm not terribly fond of these projects. This particular error was from a project using CSS to build bar charts. Would anyone actually do this? It feels like a pointless demo showing something could be done but not something actually useful. Due to this and the fact we are looking at old material, I didn't get as much out of these projects as I had hoped. I shrug and move on.