Join John Riviello for an in-depth discussion in this video Debug generated CSS, part of CSS to Sass: Converting an Existing Site.
- View Offline
- Now let's take a look at how to…easily debug the generated CSS…from your Sass files as easily as…you're used to debugging vanilla CSS.…Before I get started, since we'll be…using git to view any changes we've made,…be sure you have the current state of…your application in source control.…So since we're working in a new folder of…exercise files, I'll git init to intialize…a new git repository, and I'll add all the files.…And then commit those.…- m for a message and just "initial state".…Now let's cover why I even need to…talk about debugging.…
When you're trying to determine how…an element on your page is styled,…your workflow most likely is something like this.…Open the page in your web browser,…right click an element and go to Inspect.…And then view the CSS that's applied to it.…Take note of where that CSS came from,…and then modify the appropriate file…at that appropriate line number.…Now, the way we have things currently set up,…that last step is a bit of a challenge.…The reason is when we see that a…particular set of styles is coming from…
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