Experienced hybrid designer/developer who collaborates with stakeholders, design, and development teams to deliver solid digital solutions. Focuses on building user-centric, performant, accessible, an
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.
Experienced hybrid designer/developer who collaborates with stakeholders, design, and development teams to deliver solid digital solutions. Focuses on building user-centric, performant, accessible, an
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.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 😄
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...
This is fantastic! Thanks for sharing! Let me add this to my code notes 👏