Join John Riviello for an in-depth discussion in this video Use color variables, part of CSS to Sass: Converting an Existing Site.
- View Offline
- Okay, so now I have a list…of all the colors, all named with variables.…So it's time to start using these…in our source sass code.…The first thing we want to do…is actually import the variables…into our main styles.scss file.…So let's go into that file.…And we're gonna make the first line…@import variables…and make sure you add the semicolon at the end there…and save that file.…Note that we don't need to include…the leading underscore, since Sass will look for that file…both with and without the underscore by default.…Back in our variables files, we see the first color…is this #ffffff,…which can also be defined…as just a three-digit hexadecimal value.…
So the first thing I'm going to do…is search for this in our scss file…by opening that folder.…And we're going to right click the sass folder…and go to find in folder.…And the thing I'm going to be searching for…is #fff.…So I'll click find.…We have to ignore the variables…and we see there are two instances of it…in our source sass code.…Both of them are actually the six-digit hexadecimal…
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