I agree that CSS variables were one of the few attractive things they provided, however in my own code I generally found that -- much like mixins -- they didn't actualy give me anything that comma delimiting sets of properties didn't already provide.

For example let's say I have user action icons (login) in the header, actions in the hero section, actions in a pricing table, and buttons in some modal forms. Some are buttons, some are anchors, but they're all the same style.

I can't believe how often I see people declare their styyles separately. Or declare them separately and use variables, or declare them as mixins not caring that the pre-processor ends up slopping it in as if you wrote them separately, all because:

#mainMenu .action a,
.hero .selections a,
.priceCards footer a,
.modal footer button {
  padding:0.5em 1em;
  background:#048;
  border-radius:0.25em;
  color:#ACE;
}

Is apparently for the normies "too hard" to understand. And of course picture doing the above using that illegible and hard to maintain "nesting" crap or mixins once that wasteful extra step of pre-processing gets its ugly mitts on it.

The only reason I use CSS variables now that they're native is how you can change them on the fly, assign them via :checked and sibling selectors, and so forth for things like day/night toggles where all the JS has to do is track a checkbox state. Or for if you want to set a background from the markup for screen media you can pass it as a variable inside style="--bgImage:url(whatever.png")", instead of pissing on all other media targets by setting style="background-image:url(whatever.png):

Not that it seems most people out there even know what media targets are, given teh endless idiotic trash markup we get from the framework fools lacking media="screen" for style that only makes sense on screen, or worse media="all". Moment you see a rel="stylesheet" without a media="" or set to media="all", you are guaranteed looking at code written by people who don't even know the most basic of HTML and CSS concepts!

I think a lot of what I see built poorly with SCSS stems from pages built poorly with normal CSS. Because people don't embrace semantics, because they don't group like properties, becasue they slop classes at everything and/or use these idiotic half-tweet frameworks... I see it over and over; sites or apps with 500k of CSS doing 48k or less' job. All these pre-processors do is let you AT BEST write the same amount of code POORLY as you'd have without it written well, to deploy two to ten times the code needed once all that nesting nonsense, mixins, and even variables get unfolded.

People dive for all these shortcuts that make you work harder, not smarter, all becuse they never learned enough HTML or CSS to form a rational opinion of if these scams and bunko are actually any good.