These are public posts tagged with #sass. You can interact with them if you have an account anywhere in the fediverse.
English (영어): In Praise of the Contrarian Stack
日本語 (일본어): 反骨精神のスタック礼賛
中文(中国) (중국어(중국)): 唱反调技术栈赞歌
中文(台灣) (중국어(대만)): 逆向思維技術棧頌歌
예전부터 기술 스택을 정할 때는 꼭 청개구리 같은 기술을 고르곤 했다. 2000년대 말에 Ruby로 웹 개발을 할 때에는 Rails 대신 Sinatra를 DataMapper와 함께 썼다. JavaScript 프레임워크를 쓸 때도 Prototype 대신 MooTools를 썼다. 2010년대 초반에 Python으로 웹 개발을 할 때는 Django를 안 쓰고 Werkzeug을 SQLAlchemy와 함께 썼다. 요즘에는 React와 Next.js를 안 쓰고 Solid와 SolidStart를 쓴다. 나는 요즘 이렇게 남들 쓰는 기술을 안 쓰고 꼭 삐딱하게 대안 기술만 골라서 쓰는 것을 두고 청개구리 스택이라고 부르고 있다. 아마도 반댓말은 정석 스택 정도가 될 것이다.
청개구리 스택의 가장 큰 특징은 역시 쓰는 사람이 상대적으로 적다는 것이다. 그렇기 때문에 문제를 만날 일이 좀 더 많고, 트러블슈팅을 할 때도 다른 사람이 이미 찾은 해결책을 쓰지 못하고 직접 해결해야 할 때도 많다. 하지만 이것이 곧 그 기술, 그리고 그 기술을 너머서 그 분야에 대한 좀 더 깊은 이해를 갖추게 하는 기회가 되기도 한다. 이를테면,. Werkzeug의 추상화 수준이 높지 않아서 그 위에서 사실상 인하우스 웹 프레임워크를 만들어서 써야 했다. 물론, 이를 누군가는 삽질이라고 생각할 수 있겠지만, 그런 “삽질”이 나를 성장시킨 것도 사실이다. Stack Overflow에 답이 없을 때, 소스 코드를 직접 읽어야 했고, 그 과정에서 HTTP 프로토콜의 세세한 부분까지 이해하게 되었다. 그리고 그 기술이 오픈 소스라면, 실제로 그 기술에 기여할 기회도 많이 얻는다. 내가 제출한 풀 리퀘스트가 머지되는 순간의 희열은 정석 스택에서는 느끼기 힘든 것이다.
청개구리 스택의 또 다른 특징은 대체로 후발주자라는 것이다. 즉, 정석 스택에서 불만스러운 부분을 인식한 사람들이 참지 못하고 만든 경우가 많다. 그렇다 보니 대안적인 설계를 하게 된다. Solid가 React의 가상 DOM 오버헤드를 피하기 위해 정밀한 반응성(fine-grained reactivity)을 구현한 것처럼 말이다. 그리고 항상 그런 건 아니지만, 그러한 대안적인 설계가 정석 스택의 설계보다 더 나을 때도 많다. 정석 스택의 잘못된 선택들을 보고 배운 다음 그것들을 피해서 만드는 경우가 많기 때문이다. 이로 인해 청개구리 스택을 선택한 사람은 정석 스택을 선택한 사람보다 그 분야에 대해 조금 더 나은 이해, 좀 더 정돈된 이해를 갖출 기회가 더 많다.
한편, 정석 스택은 많은 경우 종합 선물 세트의 형태를 갖는 경우가 많다. Rails의 “설정보다 관행”(convention over configuration), Django의 “배터리 포함”(batteries included), Next.js의 풀 스택 솔루션을 생각해 보면 내부적으로는 여러 기술들을 품고 있더라도 사용자 입장에서는 그 경계를 느끼지 못할 만큼 잘 통합되어 있는 편이다. 반면 청개구리 스택은 많은 경우 여러 부품을 사용자가 직접 고른 다음 조립까지 해야 하는 경우가 많은데, 이 과정에서 시간이 많이 들긴 하지만 각 부품에 대해 최선을 고를 수 있다는 장점과 함께, 조립하는 과정에서도 각 기술에 대해 좀 더 깊게 이해할 기회가 된다.
이 조립 과정은 때로는 지난하다. Sinatra + DataMapper + Haml + Sass를 조합하면서 각각의 설정을 맞추고, 미들웨어를 연결하고, 오류를 디버깅하는 시간. 하지만 이 과정에서 나는 웹 프레임워크가 실제로 어떻게 작동하는지, 각 계층이 어떻게 연결되는지를 더 깊게 이해하게 되었다. 그리고 그 이해는 나중에 어떤 스택을 쓰든 큰 자산이 되었다.
그러나 한 가지 명심해야 할 것은, 오늘의 정석 스택도 과거에는 청개구리 스택으로 시작했을 수 있으며, 오늘의 청개구리 스택도 미래에는 정석 스택이 될 수 있다는 점이다. Ruby on Rails도 처음에는 Java 웹 개발의 대안으로 부상했고, React도 Backbone.js 같은 과거의 MVC 웹 프런트엔드 프레임워크의 대안으로 주목 받지 않았던가? 즉, 각 기술이 중요하다기 보다는 언제나 새로운 대안에 눈길을 주는 호기심과 기술적인 의사 결정을 할 때 기술 선택의 근거를 그저 대중의 선택에 위임하는 것이 아니라 직접 주체적으로 판단한다는 것이 중요하다고 생각한다.
학습과 추론이 분리되어 있는 LLM의 한계 탓에 앞으로 정석 스택은 더욱 더 정석이 되고, 청개구리 스택의 불리함은 커질 것이다. Claude Code는 Next.js 코드는 술술 짜주지만 SolidStart 코드는 헤맨다. 그럼에도 불구하고 청개구리 스택만이 줄 수 있는 배움의 기회는 여전할 것이라고 생각한다.
LLM 시대에도 나는 계속 청개구리의 길을 걸을 것이다. 왜냐하면 청개구리 스택이 주는 배움의 기회는 단순한 지식 습득을 넘어서, 기술에 대한 좀 더 깊은 이해를 함양하기 때문이다. 그러니 이 글을 읽는 여러분도, 가끔은 Stack Overflow에 답이 없는 길을 걸어보길 권한다. 그 끝에서 만나는 깨달음은 온전히 자신의 것이 될 것이다.
The author discusses their preference for choosing…
Hackers' PubStep Gradients With a Given Number of Steps, by @anatudor (@frontendmasters.com):
https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/
A deep dive into producing an interpolated
frontendmasters.comUsing CSS variables solves both these problems, but we cannot use #CSS variables inside the #Sass `mix()` function, we have to use the CSS `color-mix()`. This means the compiled output looks way uglier.
You can check it out in this @codepen demo https://codepen.io/thebabydino/pres/bNdjKwJ
#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables
Given the end steps (00272b & e0ff4f) + a number n of steps, create a gradient with n equal & equidistant steps.
Generating them in a #Sass loop is always an option, but every gradient with different end steps gets its own long stop list & modifying an end step in DevTools doesn't change ALL steps.
You can see it in the live demo https://codepen.io/thebabydino/pen/xbxeyOM
#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
My site argylewerewolf.com is a work in progress, but it now supports light & dark modes (with a monstery flair), and WCAG-compliant colours (using named CSS colours only).
Hand-written #Elixir + #PhoenixLiveview guts, #Sass (no Tailwind!) theming, & vanilla JS for light/dark mode.
PS: hire me!
Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it https://www.reddit.com/r/css/comments/1kcmabf/comment/mq5ck6m/
Live on @codepen https://codepen.io/thebabydino/pen/PwwQxdb?editors=0100
`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.
#CSS #clipPath #cssClipPath #Sass #maths #cssMaths #code #coding #web #dev #webDevelopment #webDev #frontend
“Tailwind's @apply Feature is Better Than it Sounds” by Zell Liew
https://css-tricks.com/tailwinds-apply-feature-is-better-than-it-sounds/
> Tailwind’s utilities are very powerful by themselves, but they’re even more powerful if you allow yourself to use `@apply` (and allow yourself to detach from traditional Tailwind advice). By doing this, you gain access to Tailwind as a tool instead of it being a dogmatic approach.
️ https://nicolas-hoizey.com/links/2025/04/11/tailwind-s-apply-feature-is-better-than-it-sounds/
“CSS Custom Properties vs. Sass Variables: A Pragmatic Guide” by @sturobson
https://www.alwaystwisted.com/articles/css-vs-sass
> The interplay between Sass variables and CSS custom properties should be a strategic partnership. Over nearly a decade of evolving web practices, one truth persists: robust systems balance rigidity with adaptability. Sass anchors the immutable, CSS custom properties breathe life into any required fluidity.
I had to flex my boundaries on a nesting pair of Mockingbirds & put up netting. I don’t care if mockingbirds bring big protective magic, those fucking blueberries are mine. Find something else to eat. #sass #gratitude #garden
“Tailwind's @apply Feature is Better Than it Sounds” by Zell Liew
https://css-tricks.com/tailwinds-apply-feature-is-better-than-it-sounds/
> Tailwind’s utilities are very powerful by themselves, but they’re even more powerful if you allow yourself to use `@apply` (and allow yourself to detach from traditional Tailwind advice). By doing this, you gain access to Tailwind as a tool instead of it being a dogmatic approach.
️ https://nicolas-hoizey.com/links/2025/04/11/tailwind-s-apply-feature-is-better-than-it-sounds/
Tailwind’s “@ apply” Feature Is Better Than It Sounds, by @zellwk.bsky.social (@csstricks):
https://css-tricks.com/tailwinds-apply-feature-is-better-than-it-sounds/
Most of the time, people showcase Tailwind's @apply…
CSS-Tricks“CSS Custom Properties vs. Sass Variables: A Pragmatic Guide” by @sturobson
https://www.alwaystwisted.com/articles/css-vs-sass
> The interplay between Sass variables and CSS custom properties should be a strategic partnership. Over nearly a decade of evolving web practices, one truth persists: robust systems balance rigidity with adaptability. Sass anchors the immutable, CSS custom properties breathe life into any required fluidity.
Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR
#cssMask #cssGradient #conicGradient #maths #trigonometry #Sass #loader #web #dev #webDev #webDevelopment #code #coding #frontend #cssAnimation
"Enter the code displayed in the authenticator app on your mobile device," prompts the authenticator app on my mobile device.
#microsoft #microsoft365 #office365 #MS365 #MS #tech #TechInnovation #TechWontSaveUs #enshittification #techshittification #TechSupport #technology #SaaS #sass #web #internet #bullshit #CorporateBullshit
Because someone just hearted a 5 year old @codepen demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS : we don't need *any* Sass for this anymore!
We can now do it with
background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)
#SCSS #loop #looping #newCSS #rainbow #cssGradient #coding #code #frontend #web #dev #webDev #webDevelopment #hueInterpolation
"And what are you going to do about it???"
Indy must have been paying attention to the conversations in the house about the erosion of rules-based order. That paper towel never had a chance.
#pets #dogs #doggo #dailydoggo #floof #shetlandsheepdog #sheltie #dogsofmastodon #cute #sass
Meet Sassy Sparklepuff. She takes no nonsense and serves extra sass with a side of sparkle! https://1-lisas-baker.pixels.com/featured/sassy-sparklepuff-says-be-nice-lisa-s-baker.html
#fairy #sunday #sass #sassy #fun #illustration #digitalart #art #arte #artwork #wordart #quote #funny #mastoart #fediart #fediverse #fedigiftshop #artforsale #wallartforsale #charming #whimsical #stickers #artprints #greetingcards