Sublime Text3 插件包（包含前端大部分常用插件）

# PostCSS [![Travis Build Status][travis-img]][travis] [![AppVeyor Build Status][appveyor-img]][appveyor] [![Gitter][chat-img]][chat] <img align="right" width="95" height="95" title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo.svg"> PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Google, Twitter, Alibaba, and Shopify. The [Autoprefixer] PostCSS plugin is one of the most popular CSS processors. PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful. Twitter account: [@postcss](https://twitter.com/postcss). VK.com page: [postcss](https://vk.com/postcss). [appveyor-img]: https://img.shields.io/appveyor/ci/ai/postcss.svg?label=windows [travis-img]: https://img.shields.io/travis/postcss/postcss.svg?label=unix [chat-img]: https://img.shields.io/badge/Gitter-Join_the_PostCSS_chat-brightgreen.svg [appveyor]: https://ci.appveyor.com/project/ai/postcss [travis]: https://travis-ci.org/postcss/postcss [chat]: https://gitter.im/postcss/postcss [Examples](#what-is-postcss) | [Features](#features) | [Usage](#usage) | [Syntaxes](#custom-syntaxes) | [Plugins](#plugins) | [Development](#how-to-develop-for-postcss) | [Options](#options) --- | --- | --- | --- | --- | --- | --- <a href="https://evilmartians.com/?utm_source=postcss"> <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54"> </a> [Autoprefixer]: https://github.com/postcss/autoprefixer ## What is PostCSS PostCSS itself is very small. It includes only a CSS parser, a CSS node tree API, a source map generator, and a node tree stringifier. All of the style transformations are performed by plugins, which are plain JS functions. Each plugin receives a CSS node tree, transforms it & then returns the modified tree. You can use the [cssnext] plugin pack and write future CSS code right now: ```css :root { --mainColor: #ffbbaaff; } @custom-media --mobile (width <= 640px); @custom-selector :--heading h1, h2, h3, h4, h5, h6; .post-article :--heading { color: color( var(--mainColor) blackness(+20%) ); } @media (--mobile) { .post-article :--heading { margin-top: 0; } } ``` Or if you like the Sass syntax, you could use the [PreCSS] plugin pack: ```css @define-mixin social-icon $network $color { &.is-$network { background: $color; } } .social-icon { @mixin social-icon twitter #55acee; @mixin social-icon facebook #3b5998; padding: 10px 5px; @media (max-width: 640px) { padding: 0; } } ``` [cssnext]: http://cssnext.io/ [PreCSS]: https://github.com/jonathantneal/precss ## Features Preprocessors are template languages, where you mix styles with code (like PHP does with HTML). In contrast, in PostCSS you write a custom subset of CSS. All code can only be in JS plugins. As a result, PostCSS offers three main benefits: * **Performance:** PostCSS, written in JS, is [3 times faster] than libsass, which is written in C++. * **Future CSS:** PostCSS plugins can read and rebuild an entire document, meaning that they can provide new language features. For example, [cssnext] transpiles the latest W3C drafts to current CSS syntax. * **New abilities:** PostCSS plugins can read and change every part of styles. It makes many new classes of tools possible. [Autoprefixer], [`rtlcss`], [`doiuse`] or [`postcss-colorblind`] are good examples. [3 times faster]: https://github.com/postcss/benchmark ## Usage Start using PostCSS in just two steps: 1. Add PostCSS to your build tool. 2. Select plugins from the list below and add them to your PostCSS process. There are plugins for [Grunt], [Gulp], [webpack], [Broccoli], [Brunch], [ENB], [Fly], [Stylus] and [Connect/Express]. ```js gulp.task('css', function () { var postcss = require('gulp-postcss'); return gulp.src('src/**/*.css') .pipe( postcss([ require('cssnext')(), require('cssnano')() ]) ) .pipe( gulp.dest('build/') ); }); ``` For other environments, you can use the [CLI tool] or the JS API: ```js var postcss = require('postcss'); postcss([ require('cssnext')(), require('cssnano')() ]) .process(css, { from: 'src/app.css', to: 'app.css' }) .then(function (result) { fs.writeFileSync('app.css', result.css); if ( result.map ) fs.writeFileSync('app.css.map', result.map); }); ``` If you want to run PostCSS on node.js 0.10, add [Promise polyfill]: ```js require('es6-promise').polyfill(); var postcss = require('postcss'); ``` Read the [PostCSS API] for more details about the JS API. [Promise polyfill]: https://github.com/jakearchibald/es6-promise [Connect/Express]: https://github.com/jedmao/postcss-middleware [PostCSS API]: https://github.com/postcss/postcss/blob/master/docs/api.md [Broccoli]: https://github.com/jeffjewiss/broccoli-postcss [CLI tool]: https://github.com/code42day/postcss-cli [webpack]: https://github.com/postcss/postcss-loader [Brunch]: https://github.com/iamvdo/postcss-brunch [Stylus]: https://github.com/seaneking/poststylus [Grunt]: https://github.com/nDmitry/grunt-postcss [Gulp]: https://github.com/postcss/gulp-postcss [ENB]: https://github.com/theprotein/enb-postcss [Fly]: https://github.com/postcss/fly-postcss ## Custom Syntaxes PostCSS can transform styles in any syntax, not only in CSS. There are 3 special arguments in `process()` method to control syntax. You can even separately set input parser and output stringifier. * `syntax` accepts object with `parse` and `stringify` functions. * `parser` accepts input parser function. * `stringifier` accepts output stringifier function. ```js var safe = require('postcss-safe-parser'); postcss(plugins).process('a {', { parser: safe }).then(function (result) { result.css //=> 'a {}' }); ``` ### Syntaxes * [`postcss-scss`] to work with SCSS *(but does not compile SCSS to CSS)*. [`postcss-scss`]: https://github.com/postcss/postcss-scss ### Parsers * [`postcss-safe-parser`] finds and fix CSS syntax errors. [`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser ### Stringifiers * [`midas`] converts a CSS string to highlighted HTML. [`midas`]: https://github.com/ben-eb/midas ## Plugins Go to [postcss.parts] for a searchable catalog of the plugins mentioned below. [postcss.parts]: http://postcss.parts ### Control There are two ways to make PostCSS magic more explicit. Limit a plugin's local stylesheet context using [`postcss-plugin-context`]: ```css .css-example.is-test-for-css4-browsers { color: gray(255, 50%); } @context cssnext { .css-example.is-fallback-for-all-browsers { color: gray(255, 50%); } } ``` Or enable plugins directly in CSS using [`postcss-use`]: ```css @use autoprefixer(browsers: ['last 2 versions']); :fullscreen a { display: flex } ``` [`postcss-plugin-context`]: https://github.com/postcss/postcss-plugin-context [`postcss-use`]: https://github.com/postcss/postcss-use ### Packs * [`atcss`] contains plugins that transform your CSS according to special annotation comments. * [`cssnano`] contains plugins that optimize CSS size for use in production. * [`cssnext`] contains plugins that allow you to use future CSS features today. * [`precss`] contains plugins that allow you to use Sass-like CSS. * [`rucksack`] contains plugins to speed up CSS development with new features and shortcuts. * [`stylelint`] contains plugins that lint your stylesheets. [`stylelint`]: https://github.com/stylelint/stylelint [`rucksack`]: http://simplaio.github.io/rucksack [`cssnano`]: https: