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.
Apply our advanced mixin
From the course: CSS to Sass: Converting an Existing Site
Apply our advanced mixin
- Now that we have a working rem pixel mixin, we can use it everywhere it is needed in our styles.scss file. I want to save my changes and compile our CSS as we're going along. So I'll throw out the grunt and watch process with Grunt. Now let's go back to Sublime. I'll continue to search for the word rem so we can replace it with our mixin. Let me first copy the mixin right here from... So we have that, so we can replace it the next time around. And let's COMMAND + F, ENTER. Find the next one. So here I see we have a font-size that was defined in rems but doesn't have a pixel fallback. This is actually great, because we're fixing a bug by using our mixin, because we missed out our chance to apply a fallback in that case. So we'll save that. COMMAND + F and search for the next instance of rem, and we see it's here. So we have a line-height. We just copy that actually from right here. Paste it in. And that value will be three. Delete the line-heights. And then I actually see right below…
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
-
-
-
-