Join John Riviello for an in-depth discussion in this video Handle browser prefixes with Autoprefixer, part of CSS to Sass: Converting an Existing Site.
- View Offline
- Many of the Open Source Mixin Libraries for Sass…handle browser prefixes for you.…When Sass first came around,…this was incredibly useful.…Since then, some CSS properties that used to be prefixed…are no longer needed to be prefixed…because usage of those browsers that required them is so low…or almost non existent.…Instead of relying on Mixin libraries to decide for you…what should be prefixed and what should not,…there is NPM module called Autoprefixer…that handles all this for you,…and puts the browser support control in your hands.…
It is so effective, the main Sass authors…actually recommend that you use it instead of Sass…for handling the CSS for different browsers.…I agree with them…so let's use this powerful tool.…Autoprefixer is easy to integrate into an existing project…even if you already have browser prefixes…in your Sass or CSS.…Using the data from can I use dot com,…a website that shows which browsers,…and what overall percentage of browsers…support various features.…It can remove prefixes you already have in place…
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