i didn't vote in your poll, because none of the answers feel quite like they describe my experience. i started actively learning CSS in late 2022, so i'm used to CSS being able to do a lot on its own. i mostly learned by searching for answers to specific questions, instead of following any structured courses or guides, and none what i read brought up CSS transpilers at all. i remember that my first encounter with SASS was on
codepen, when i was looking up examples of how to do something (but i forget what it was exactly). i thought the CSS looked weird, pasted it into my stylesheet anyway, realized it didn't work at all, then went back to look closer at the codepen where i saw the code was labeled SASS instead of CSS.

i looked up what SASS was, found a SASS to CSS tool to convert the code into something usable to me, then went on my way.
so i've never used CSS transpilers for my own sites, but i
have used them! only once, and pretty recently! earlier this year i got into writing userstyles for myself, and then into writing more easily customizable versions to share with others (the
stylus broswer extension provides a little menu for configuring variables that's more approachable to people who aren't interested in writing their own CSS). i had been finding it difficult to use status.cafe because the homepage shows statuses from
every single user and a sizable fraction of them use the site to vent, be passive aggressive, or outright hostile. there's no built-in block or mute system, so i started hiding specific users with the following CSS:
.status:has(a[href="/users/example"]) {
display: none;
}
but every time i wanted to add a new user to the list, i had to add a new CSS selector. not too much of a pain for me, but what i really wanted for the shareable version of the userstyle was a way to add to the list of hidden users through the stylus configuration menu. reading the stylus docs for
writing userCSS reintroduced me to the idea of CSS preprocessors, and that i could write loops! i went with stylus (the preprocessor) over uso or less, maybe just because the name matched the browser extension name?
all this resulted in my
status.cafe userstyle, which has variables defined as:
@var text hiddenUsers "Hidden Users" "example example2"
with the following loop:
for user in hiddenUsers
.status:has(a[href=\"\/users\/{user}\"])
display: none;
it works exactly as i had hoped! anyone using the style(+ extension) can just type in a list of usernames separated by spaces and any statuses from those users will be instantly hidden.
that's my only experience using CSS preprocessors so far, but i expect that i'll find more uses for them in future userstyles!