{"id":18405732,"url":"https://github.com/ningbonb/postcss-comn","last_synced_at":"2026-04-16T22:30:56.242Z","repository":{"id":117717731,"uuid":"81516521","full_name":"ningbonb/PostCSS-Comn","owner":"ningbonb","description":"PostCSS入门与配置","archived":false,"fork":false,"pushed_at":"2017-02-17T03:39:25.000Z","size":25,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-10T20:01:47.291Z","etag":null,"topics":["notes","postcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ningbonb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-10T02:15:23.000Z","updated_at":"2024-02-01T02:13:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed3b892e-12d3-4226-ae3d-a08390d91b27","html_url":"https://github.com/ningbonb/PostCSS-Comn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ningbonb/PostCSS-Comn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ningbonb%2FPostCSS-Comn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ningbonb%2FPostCSS-Comn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ningbonb%2FPostCSS-Comn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ningbonb%2FPostCSS-Comn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ningbonb","download_url":"https://codeload.github.com/ningbonb/PostCSS-Comn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ningbonb%2FPostCSS-Comn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31907424,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"ssl_error","status_checked_at":"2026-04-16T18:21:47.142Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["notes","postcss"],"created_at":"2024-11-06T03:04:27.331Z","updated_at":"2026-04-16T22:30:56.201Z","avatar_url":"https://github.com/ningbonb.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS-Comn\nPostCSS-Comn使用说明，整合PostCSS常用功能\n\n## 插件作用\n- 支持CSS未来语法\n- 自动补全浏览器私有前缀\n- CSS预处理（整合Sass、LESS或Stylus功能，语法基本和Sass的相同）\n- 通过@import，整合多个CSS文件\n- 将相同的CSS媒体查询规则合并为一个\n- 压缩CSS文件\n- 给rgba颜色创建降级方案(添加备用颜色)\n- 给opacity提供降级方案（给IE浏览器添加滤镜属性）\n- 让IE8支持rem单位\n- 将伪元素的`::`转换为`:`(IE8不支持`::`)\n\n## 使用说明\n1. [全局安装Gulp][gulp-g]\n2. 复制仓库文件到项目目录（`PostCSS文件夹` 内的内容）\n3. 命令终端运行：`npm install`（淘宝镜像使用该命令：`cnpm install`）\n4. `src文件夹` 为编辑源文件，`css文件夹` 为生成代码文件\n5. `src文件夹` 目录下命令终端运行：`gulp css`\n6. `css文件夹` 内查看编译后结果\n\n## 语法介绍\n\n- [cssnext语法介绍](./cssnext)\n- [PreCSS语法介绍](./precss)\n\n----------\n\n## 以下内容为自定义进阶\n\n## PostCSS-Comn插件扩展\n以扩展`postcss-will-change`插件为例\n\n**安装插件 项目目录下执行命令行**\n\n```git\n$ npm install postcss-will-change --save-dev\n```\n**配置`gulpfile.js`文件**\n\n```javascript\n// 添加此行\nvar will_change = require('postcss-will-change');\n```\n\n```javascript\ngulp.task('css', function () { \n\tvar processors = [\n\t\t// 添加此行\n\t\twill_change\n\t]; \n});\n```\n\n**完成 执行命令查看效果**\n```git\ngulp css\n```\n\n## PostCSS配置与命令\n\n**淘宝镜像npm`cnpm`（写命令时，将`npm`换成`cnpm`，其他与npm语法相同）**\n```git\n$ npm install cnpm -g --registry=https://registry.npm.taobao.org\n```\n\n**全局安装`gulp`**\n如果之前有安装过一个全局版本的 gulp，请执行一下`npm rm --global gulp`来避免和`gulp-cli`冲突\n\n```git\n$ cnpm install --global gulp-cli\n```\n\n**项目安装`gulp`（项目根目录下）**\n```git\n$ cnpm install --save-dev gulp\n```\n\n**配置`package.json`文件**\n\n```json\n{ \n\t\"name\": \"PostCSS-Comn\", \n\t\"version\": \"0.0.1\", \n\t\"description\": \"PostCSS gulp plugin\", \n\t\"keywords\": [ \n\t\t\"gulpplugin\", \n\t\t\"PostCSS\", \n\t\t\"css\" \n\t], \n\t\"author\": \"ningbo\", \n\t\"license\": \"MIT\", \n\t\"dependencies\": { \n\t\t\"postcss\": \"^5.0.0\", \n\t\t\"gulp\": \"~3.8.10\" \n\t}, \n\t\"devDependencies\": { \n\t\t\"gulp-postcss\": \"^6.0.1\" \n\t} \n}\n```\n\n**安装`gulp-postcss`（项目根目录下）**\n```git\ncnpm install --save-dev gulp-postcss\n```\n\n**配置`gulpfile.js`文件，`src`文件为css编辑文件，`css`文件为编译生成文件**\n\n```javascript\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\n```\n\n```javascript\ngulp.task('css', function () { \n\tvar processors = [\n\t]; \n\treturn gulp.src('./src/*.css')\n\t.pipe(postcss(processors))\n\t.pipe(gulp.dest('./css')); \n});\n```\n\n**测试（在`src`中创建测试文件`style.css`）**\n```css\n.test{\n\tbackground: black;\n}\n```\n**测试运行命令，在`css`文件查看`style.css`**\n\n```git\n$ gulp css\n```\n\n**添加PostCSS插件：[Autoprefixer][autopre](处理浏览器私有前缀)，[cssnext][cssnext](使用CSS未来的语法),[precss][precss](像Sass的函数)**\n\n```git\n$ cnpm install autoprefixer --save-dev\n$ cnpm install cssnext --save-dev\n$ cnpm install precss --save-dev\n```\n\n**配置`gulpfile.js`文件**\n\n```javascript\nvar autoprefixer = require('autoprefixer'); \nvar cssnext = require('cssnext'); \nvar precss = require('precss');\n```\n\n```javascript\nvar processors = [\n\tautoprefixer,\n\tcssnext,\n\tprecss\n]; \n```\n\n**运行命令，在`css`文件查看`style.css`**\n\n```git\n$ gulp css\n```\n\n## PostCSS入门教程\nsource:[http://www.w3cplus.com][source1]\n\n- [PostCSS深入学习：你需要知道什么][konw1]\n- [PostCSS深入学习：设置选项][konw2]\n- [PostCSS深入学习：Gulp设置][konw3]\n- [PostCSS深入学习：Grunt配置][konw4]\n- [PostCSS深入学习: 管理插件][konw5]\n- [PostCSS深入学习: 跨浏览器兼容性][konw6]\n- [PostCSS深入学习: 压缩和优化CSS][konw7]\n- [PostCSS深入学习: PreCSS的使用][konw8]\n- [PostCSS深入学习: 定制自己的预处理器][konw9]\n- [PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用][konw10]\n- [PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS][konw11]\n- [PostCSS深入学习: 简写和速写][konw12]\n- [PostCSS入门：Sass用户入门指南][know13]\n\n## 工具\n\n- [CodePen][codepen]\n- [Prepros][prepros]\n\n## 插件\n插件列表：[Github][pluginsList] | [postcss.parts][postcssParts]\n\n常用插件：\n\n- [cssnext][cssnext]：CSS未来语法\n- [Autoprefixer][autopre]：自动补全浏览器私有前缀\n- [precss][precss]：CSS预处理（整合Sass、LESS或Stylus功能，语法基本和Sass的相同）\n- [postcss-import][import]：通过@import，整合多个CSS文件\n- [css-mqpacker][mqpacker]：将相同的CSS媒体查询规则合并为一个\n- [cssnano][cssnano]：压缩CSS文件\n- [postcss-color-rgba-fallback][postcssRgba]：给rgba颜色创建降级方案(添加备用颜色)\n- [postcss-opacity][opacity]：给opacity提供降级方案（给IE浏览器添加滤镜属性）\n- [node-pixrem][pixrem]：让IE8支持rem单位\n- [postcss-pseudoelements][pseudoelements]：将伪元素的`::`转换为`:`(IE8不支持`::`)\n\n[source1]:http://www.w3cplus.co\n\n[konw1]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html\n[konw2]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-instant-setup-options.html\n[konw3]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-gulp-setup.html\n[konw4]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-grunt-setup.html\n[konw5]:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-exploring-plugins.html\n[konw6]:http://www.w3cplus.com/PostCSS/using-postcss-for-cross-browser-compatibility.html\n[konw7]:http://www.w3cplus.com/PostCSS/using-postcss-for-minification-and-optimization.html\n[konw8]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-preprocessing-with-precss.html\n[konw9]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-roll-your-own-preprocessor.html\n[konw10]:http://www.w3cplus.com/PostCSS/using-postcss-together-with-sass-stylus-or-less.html\n[konw11]:http://www.w3cplus.com/PostCSS/using-postcss-with-bem-and-suit-methodologies.html\n[konw12]:http://www.w3cplus.com/PostCSS/postcss-deep-dive-shortcuts-and-shorthand.html\n[know13]:http://www.w3cplus.com/preprocessor/getting-started-with-postcss-a-quick-guide-for-sass-users.html\n\n[codepen]:http://codepen.io/\n[prepros]:https://prepros.io/\n\n[cssnext]:http://cssnext.io/features/\n[autopre]:https://github.com/postcss/autoprefixer\n[precss]:https://github.com/jonathantneal/precss\n[cssnano]:http://cssnano.co/\n[import]:https://github.com/postcss/postcss-import\n[mqpacker]:https://github.com/hail2u/node-css-mqpacker\n[postcssRgba]:https://github.com/postcss/postcss-color-rgba-fallback\n[opacity]:https://github.com/iamvdo/postcss-opacity\n[pixrem]:https://github.com/robwierzbowski/node-pixrem\n[pseudoelements]:https://github.com/axa-ch/postcss-pseudoelements\n\n[pluginsList]:https://github.com/postcss/postcss#plugins\n[postcssParts]:http://postcss.parts/\n\n[gulp-g]:http://www.w3cplus.com/PostCSS/using-postcss-for-cross-browser-compatibility.html","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fningbonb%2Fpostcss-comn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fningbonb%2Fpostcss-comn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fningbonb%2Fpostcss-comn/lists"}