Join John Riviello for an in-depth discussion in this video Solution: Add new styles with our variables, mixins, and sprite tools, part of CSS to Sass: Converting an Existing Site.
- View Offline
- So here's my solution to the challenge.…What I'm about to show you…certainly isn't the only way to solve this,…but it's one way.…First we have to take care of the to-dos…in the product-subnav in styles.scss.…And with the help of our existing mixins and variables…this is pretty straightforward.…So the first thing we have to do…is reset the margin padding and list-style-type,…which we have a mixin for already.…And that's list-reset, so we'll use that.…Then we need standard spacing on the bottom,…so we'll use our,…set a margin-bottom to our standard spacing variable.…
Then we need some yellow-green2 text,…so that's just color, yellow-green2.…And border-color is also going to be yellow-green2.…Great.…So let's save that file…and we'll get our Grunt watcher up and running.…So we'll run grunt.…That's compiled, let's check it out in a browser.…So there's our default,…I'll reload.…Now we've got some green text…with a green border for hover, awesome.…
So the next thing is adding the sprite images…to this subnavigation,…as well as the product page heading text.…
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