Initialize the Form Design System Setup with Sass and CSS Variables

Share this video with your friends

Send Tweet

We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system.

We will set up Sass variables for the initial them and learn how to use the !default flag to allow our system to be easily overridden from project to project, making our form styles ultra transferable and reusable. You'll also learn how to leverage Sass color functions for ease of theming. We'll map the Sass variables to CSS variables so that as we build up our system we can use CSS variables for the most flexibility in our theming.