![]() ![]() The quality of these plugins is an open question. postcss-spiffing Lets you use British spellings such as “colour” and “grey” in your code.css2modernizr Creates a Modernizr config file based on your CSS so you get only the functions you need.lost One of several grid systems available as a plugin.postcss-vertical-rhythm Adds vertical rhythm to styles.cssgrace Compiles CSS3 for backward compatibility with older versions of Internet Explorer.postcss-conic-gradient Supports conic gradients, although such gradients only work with a polyfill.cssnext Allows developers to use future CSS features now, but it compiles them into current standards.Several-dozen plugins offer enough interesting functionality to get even the most cranky developer excited. On a basic level, using it involves figuring out what you need your preprocessor to do-loops, nesting, variables, autoprefixing, etc-and getting everything in place.įor a developer comfortable in the command line-comfortable enough to troubleshoot errors and sift through occasionally poor documentation PostCSS can still feel sort of like assembling a chest of drawers from Ikea.įor someone not as well-versed, perhaps someone trying to graduate from CodeKit to Gulp, PostCSS can feel more like being presented with a pile of parts and asked to assemble them into a Formula 1 car.īut in the end you do get something powerful. task ( ' css ', function () ) īecause of the modular nature of PostCSS, getting it up and going is more involved than installing SASS or LESS. Here’s Gulp code for adding an autoprefixer: var postcss = require ( ' gulp-postcss ' ) var autoprefixer = require ( ' autoprefixer-core ' ) gulp. If there’s more than one, use square brackets. To use them, pass plugins to the PostCSS task as an argument. NPM also installs the plugins, and they can be saved as dev dependencies. In Gulp, it’s included like any other task. This allows PostCSS to fit easily into existing Grunt or Gulp workflows. PostCSS runs on Node and installs via NPM. Those who use Gulp or Grunt for their projects will likely find even more to like. Like Gulp and Grunt it’s meant to be extensible, flexible and customizable for a developer or project’s particular needs. And those plugins can do anything a developer might need. Its power comes from plugins written in JavaScript. PostCSS resembles the task runners Gulp or Grunt in that all alone it doesn’t actually do anything. Additional features and functions come with an update. Preprocessor code is centrally maintained. LESS, SASS and Stylus are powerful but monolithic-web developers write against an established list of functions that the preprocessor offers. Rather than just solving problems inherent in CSS it also aims to solve problems with preprocessors themselves. ![]() If we were to play the One of these things is not like the other game from Sesame Street, PostCSS is the outlier. The programmy stuffloops, logic variables and other niceties-added by preprocessors makes CSS a lot more usable. They aim to solve problems inherent in CSS, mainly that CSS is pretty dumb compared with JavaScript. PostCSS comes at the problem from another direction. Another new thing to learn just to do my job.īut what if it offers something significantly different than the other three? Might it be worth it? We have SASS that supplanted LESS and now Stylus aims to replace SASS 1. “What? Are you still using Widget.js? LOL! Dingus.js just came out this afternoon and it’s amazeballs awesome!ĬSS preprocessors have been on this new hotness treadmill for a few years. “OMG! They just released Widget.js this morning and it’s amazeballs awesome! Everyone is using it! I’m moving all my projects to it! My theory is that it’s because devs are faced with a constant barrage of the new hotness. ![]() Processor: 2 x 2.Web developers suffer from the worst kind of imposter syndrome. Javascript compiling wasn't drastically different, but still felt lagged when comparing to CodeKit 1. This could be attributed to differences in LESS 1.5 and 1.6. In CodeKit 1, by the time I pull the browser back up, everything is compiled and ready to go. Here are my super accurate iPhone stopwatch calculations comparing LESS & Javascript in various projects (I don't use many other languages regularly, so I can't attest to their speed.) LESS For moderately complex projects (20-30 LESS files, 1-10 Javascript files), the time between saving and the notification that the files have updated has gone up by several seconds compared to CodeKit 1 Since switching to CodeKit 2, code compiling has been noticeably slower. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |