DEV Community

loading...

Discussion on: CSS Variables

Collapse
azzcatdesign profile image
Catherine Azzarello

Thanks, Samantha!

I'm totally on board with CSS variables! I've got CodePens where I worked out responsive typography, spacers, and containers using global and scoped variables plu with calc(). Even took it further with HSL colors and abstracting the separate values to local variables for button colors. You can't do the same kind of color edits in CSS with variables as you can with SCSS ie: darken($color, 10%) but I've found I'm not missing SCSS variables for color, just organizing differently.

Collapse
samanthaming profile image
Samantha Ming Author

OH that's super cool! If you don't mind, can you send me the link to it? Would love to see how you organize your code with css variables 😄

Collapse
azzcatdesign profile image
Catherine Azzarello

Sure! Layout Overlay with Container & Grid Modifiers codepen.io/azzcatdesign/pen/PoovWmp; Type Variables: Responsive Scale Ratios codepen.io/azzcatdesign/pen/yLLWgbq; Spacing Variables (Fibonacci) codepen.io/azzcatdesign/pen/YzzbNQ...; and HSL Custom Properties for States codepen.io/azzcatdesign/pen/WNNBRj...

Thread Thread
samanthaming profile image
Samantha Ming Author

This is fantastic! Thanks for sharing! Let me add this to my code notes 👏