Reviewing what's new (and relevant to me) with Angular over the past two years, I saw improved support for Sass listed. As soon as I saw that, I realized I should review Sass before diving into Angular again. Codecademy has a "Learn Sass" course and based on my notes here I've taken it once years ago. My Codecademy progress tracker page showed the course as "Completed" as well. But when I clicked "Start", my progress bar dropped to 41% complete. This is because the course had a few updates in the "Sustainable SCSS" section. There's also the fact that my previous run was without a Codecademy Pro subscription, so I didn't have access to the projects section of the course.

Reviewing the Lessons turned out to be quite useful, as I had forgotten some of Sass and other pieces took on a different meaning in light of other recent classes I've taken. Notable Sass features include:

  • Nesting: the course started with nesting clauses, which is still my favorite part of Sass and probably still the biggest value added. Keeping related CSS rules together in a parent/child hierarchy helps understand organization in a style sheet, we no longer have to memorize which rules we've seen elsewhere.

  • Variables: The Sass variables mechanism isn't exactly the same as CSS variables a.k.a. custom properties, but they solve many of the same problems. Historically, Sass variables existed before CSS variables support were widespread among browsers.

  • Functions: Sass functions also start with a fixed set just like CSS functions. (We can't declare our own functions.) But Sass goes further by giving us features like loops and if/else which I haven't seen from CSS functions.

  • Mixin: The final major Sass feature I liked. A @mixin is a CSS macro that we can then use elsewhere in the style sheet via @include. As demonstrated in the course, this is great for packing all different vendor prefixes into a single line.

The course covered other topics, but they didn't stand out as much to me. Maybe I'll value them after tackling more projects. I'm curious if the best practices recommended in "Sustainable SCSS" would be very practical elsewhere, especially something like Angular which imposes its own project file structure.

So the lessons review were fine, and now with a Pro subscription I wanted to give the projects a shot. I ran into problems immediately: my changes in .scss file did not reflect on .css, nor are changes visible in rendered HTML. What's going on? Time for some debugging.