This means you’re changing how you write CSS to how compass requires you to write CSS.Īutoprefixer allows you to write CSS the way it was meant to be in the CSS Spec. It only does that does it much better than compass in the following 3 ways:Ĭompass requires to use mixins they have created in order for prefixing to work properly. Autoprefixer vs Compass at prefixingĪutoprefixer is made to be super duper good at vendor prefixing. If we were to compare the two of them, it is only fair to compare the Compass prefixing section with autoprefixer. An example of this is the word-break mixin that helps with adding hyphens and breaking long words up when they reach the end of the line.Ĭreating Image Sprites - Compass generates images sprites for you with only a few command in the sass file, which really helps make spriting incredibly simple.Īs you see, Compass does way more than autoprefixer. I’ve written about using compass vertical rhythms previously here.Īdding extra helpful CSS Mixins - In addition to prefixing, Compass also has various helpful CSS mixins that takes effort out from writing CSS manually. Prefixing CSS - Compass adds vendor prefixes by using mixins and that gets compiled into css.Ĭreating beautiful typographic rhythms - Compass allows you to easilly add vertical rhythms with the help of the vertical rhythms module. That doesn’t tell us much, so lets break it down to see what compass does.Ĭompass helps frontend developers out with these few things: Its website mentioned that it’s an open-source CSS Authoring Framework. What is CompassĬompass is many things in one. Autoprefixer’s github has a very complete portion on setting these preferences. The only thing you need to know is how to set autoprefixer preferences like the example given above. With the improvement of preprocesses like Codekit 2 and Prepos, you can use autoprefixer by simply checking a checkbox. Thankfully, its much easier to use autoprefixer now. It could be added with dev tools like grunt, gulp, node, ruby, or you had to be comfortable with using the terminal. Previously, you had to be quite knowledgeable development workflows in order to use it. Using autoprefixer in the past was way more difficult that using it now. For example: "last 1 version", " > 1% ", "Explorer 7" You can specify which browsers to support by stating them within autoprefixer’s preferences. Once testing is done, browser makers will automatically remove the need for prefixes for that particular CSS property. They are used to implement features that hasn’t been fully finalized. If you didn’t know, vendor prefixes are a way for browser makers to add support for newer CSS features that they are still experimenting with. Autoprefixer will take care of everything for you. This means that you don’t have to write any vendor prefixes while writing CSS code. Since autoprefixer runs checks against caniuse, its prefixes will be spot on. It is the place for frontend developers to check for browser support. The data on is the most accurate data source on browser support on the internet, be it HTML5, CSS or Javascript. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code against. What is AutoprefixerĪutoprefixer is a CSS post processor. This article tries to help you with understanding what Compass and Autoprefixer does. The article alone wouldn’t have been very helpful if you didn’t know what was autoprefixer and compass. I wrote about a hacky fix on using the built in Autoprefixer in Codekit 2 with Compass.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |