Create a Basic Responsive Grid System With CSS Grid

Apply Aspect Ratio Sizing to Images with CSS object-fit

Create Basic Effects with CSS box-shadow

Create an Automatically Responsive Flexbox Gallery

Create Viewport Responsive Layout Spacing Using CSS Clamp

Access Theme Color Values With Sass

Apply Image Filter Effects With CSS

Define and use CSS Custom Properties

Create an Accessible Group of Form Fields

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts 

Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

Stephanie Eckles: [0:00] Here, we have defined a set of color variables. We're going to make a map for our variables called theme-colors. A map in Sass is defined by a set of key value pairs within parentheses. We'll use the key from our variable names such as primary, referred to color-primary, and so on.

[0:22] Once our map is defined, we'll create a function called theme-color, which will intake a key. I will use the built-in map-get function to access our theme-colors map and return the value associated with the key. We can now apply our colors to our site components.

[0:44] Now that we have created the theme-color function to easily access the theme-colors mapped by key and have used the theme-color function throughout our styles, we can easily change any of these variables to quickly redeem our app.

[1:00] We'll update the primary and the support color variable values. Upon save, you can see that we now have a new theme applied to our application.

Course

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts

Access Theme Color Values With Sass

Share this video with your friends