Join John Riviello for an in-depth discussion in this video Apply our advanced mixin, part of CSS to Sass: Converting an Existing Site.
- View Offline
- 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 it is our next use.…So we have font-size, and we're using…
In these Sass tutorials, students will learn the benefits of libSass over the original Ruby Sass, and set up a Sass-friendly development environment with Node.js and Grunt. A unique aspect of this course is learning how to handle challenges specific to integrating Sass with an existing website, such as new debugging workflows and the variables and mixins worth the effort to define. Author John Riviello also introduces a few Sass tools that speed up media query handling, automatic browser prefixing, and sprite generation. At the end of the course, he shows how your setup work pays off, styling a whole new section of the practice site in just 15 minutes.
- Deciding between Ruby Sass or libSass
- Installing Node.js and Grunt-Sass
- Converting CSS to SCSS
- Creating core variables and mixins
- Abstracting units and values
- Applying advanced mixins
- Generating image sprites with eyeglass-spriting
- Creating high-DPI sprites
- Building new styles