From the course: CSS to Sass: Converting an Existing Site
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Abstract font values into variables
From the course: CSS to Sass: Converting an Existing Site
Abstract font values into variables
- Now let's create and use some variables related to fonts, specifically font sizes. First thing I'm going to do is I'm going to add a font section to our variables, that SCSS file. So add that right here with a comment. And save that. Now there are two searches to run that determine what font sizes are being used, and that is for the word font with a colon and then font-size with a colon, since either of those can be used to define the actual font size. So let's run those searches. We'll right-click the Sass folder, go to Find in Folder, and I'll try font first. This is the shorthand syntax. Click Find, and looks like for us it's only being used in one spot and it's the inherit value, so I don't need to worry about that. Let's run the same search again, this time for font size. So I hit Enter to run that search and I see a wide range of values in different types of units. We have ems, percentages, pixels, rems, lots of stuff in play here. So again, I'm just going to kind of go…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Create color variables3m 45s
-
Use color variables6m 55s
-
Abstract layout units into variables3m 38s
-
Abstract font values into variables8m 22s
-
Abstract z-index values into variables2m 47s
-
Install csscss2m 5s
-
Mixins worth creating6m 33s
-
Create advanced mixins4m 44s
-
Apply our advanced mixin5m 57s
-
Manage media query breakpoints with include-media6m 53s
-
-
-
-