Join John Riviello for an in-depth discussion in this video Abstract font values into variables, part of CSS to Sass: Converting an Existing Site.
- View Offline
- 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 through…and make note of any patterns that emerge…
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