Dynamic CSS with Custom Properties (aka CSS Variables)

Modern browsers ship with CSS Custom Properties, also known as “CSS variables”, a superpower that enables us to create reusable components without any JavaScript dependencies needed – using only vanilla CSS! Learn how to leverage Custom Properties to improve code reuse, maintainability, and downright enable possibilities that previously required large amounts of hard-to-maintain JavaScript and violated the separation of concerns. See practical examples of why CSS Custom Properties are a revolution in the way we write CSS!

• Introduction
• CSS Variables Overview
• Inheritance
• Creating Style Hooks
• Fallbacks
• Fallbacks Exercise
• Fallbacks Solution
• DRY Fallback Strategies
• Invalid Values & Computed Values
• @supports & Custom Properties
• Custom Properties Exercise
• Custom Properties Solution
• Cycles & Overriding Properties
• Flexible Pie Chart Exercise
• Flexible Pie Chart Solution
• Custom Property with a Sass Loop
• Space Toggles
• Responsive Design with Custom Properties
• Colors
• Colors Exercise
• Colors Solution
• Color: Present and Future
• Transitions & Animations
• Numbers, Lengths, & Variable Values
• Number Toggles
• Range Mapping
• Numeric Range Exercise
• Numeric Range Solution
• General Linear Range Mapping
• Strings & Numbers in Strings
• Images
• Javascript
• Dynamic Button Ripple Effect Exercise
• Dynamic Button Ripple Effect Solution
• Dynamic Form Element Styling
• Heading Typing Effect
• Dynamic Scrollbar
• Wrapping Up