postcss"折腾"记

内容简介：postcss"折腾"记

01

postcss 是什么呢？

postcss github项目上定义是

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.（postCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。）

嗯，它只是一个 转换css 的 工具 而已，（后话：跟sass、less这些预处理器不是一样的东西，但是不是说用postcss就不能用sass了，它们是可以共存的）。

02

postcss能做什么？

①我们可以放心大胆尝试写css未来的新语法了，像变量、mixin、函数计算这些。css的很多新语法很吸引人，但是，我们开发过程中却不敢用，因为兼容问题。

而postcss提供的 cssnext 插件，可以帮我们把新语法转换为普通语法。

:root { 
    --body_bg_color: #000; 
    --centered: { display: flex; align-items: center; justify-content: center; };
}
body { background: var(--body_bg_color); }  
.flexbox { @apply --centered;}

转换后的代码

body { background: #000; }  
.flexbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

不过，用的过程中发现，也不是完全可以放开了用，它不支持新语法局部变量的转换。 :warning: The definitions are limited to :root selector.就是一个不完全功能插件嘛 /(ㄒoㄒ)/

②postcss的招牌插件，autoprefixer，自动添加浏览器前缀。它有单独的插件： https://github.com/postcss/autoprefixer 。

但实际上，有个插件 precss ： PreCSS is a tool that allows you to use Sass-like markup in your CSS files。安装了它，很多插件都可以不用装了，像autoprefixer、mixins这些，它都包含了。

如果用惯sass的话，装了它，可以用sass的写法来写我们的样式代码。不过具体还是有些不一样的，比如，sass定义mixin： @mixin ， postcss定义mixin： @define-mixin ，诸如此类的差异，不过这些都问题不大。

③px转rem插件： https://github.com/cuth/postcss-pxtorem 。他会将你px单位按照你设置的rootValue转为rem。如果你想要某个属性的px单位保持不变，可以在配置参数 propList 可以屏蔽掉，比如 propList: ['*', '!border'] 屏蔽border，又或者如果希望1px的单位就不转了，可以配置参数 minPixelValue ，比如 minPixelValue: 2 小于2px的不转换

④postcss提供了很多插件，五花八门，满足你的各种需求,很多很多好东西，不过我现在是还没有吃透，以后可以慢慢看： http://github.com/postcss/postcss/blob/master/docs/plugins.md

⑤postcss转换后的代码格式目前还没找着一个称心的插件来格式化代码。

平心而论，折腾这么久，我还是觉得sass要顺手一点，(特别是function跟mixin这两块，postcss要多别扭有多别扭)但是用postcss可以写css新语法，就这一点，我就会尝试去用它。

03

怎么开始用postcss?

①先安装nodejs： https://nodejs.org/zh-cn/ ，装了node就会自动安装npm的了。我们的插件都需要用npm来安装。

②安装全局的postcss-cli: npm install -g postcss-cli 。postcss以后会跟webpack、gulp、grunt等这些构建工具一起 使用，但是，如果不想用构建工具，用postcss-cli也可以。

③在新建的项目目录执行 npm init ，然后会生成一个package.json文件，package.json定义了配置信息以及所需模块。 按需安装所需模块，比如 npm install --save-dev postcss-cli postcss-import postcss-cssnext precss

④在项目根目录新建一个 postcss.config.js 的文件,这个就是postcss的配置文件，在这里引入需要用到的插件。【plugins参数引入的插件的顺序很重要很重要】，它是按顺序来转换你的css的，所以，如果用到后面的插件转换的代码里面有前面的插件的语法，那就很坑爹的要把前面的插件再在后面引入一遍。

⑤运行 postcss -d css/ _pcss/*.css -w 转换代码，-d是输入目录，-w是监控输入。可以把这个命令写入到 package.json 的scripts里面

"scripts": {
    "start": "postcss -d css/ _pcss/*.css -w"
  }

这样以后只执行 npm start 就行了。

PS血的教训：技术类的教程文章都是有 时效性 的，所以看的时候，年代久远的文章，看思路就可以了，真的要用要写，一定一定看官方文档。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 十年博客折腾历史
• 折腾 Python 版本管理
• 折腾Kubernetes
• 一个安防老兵的“折腾人生”
• 树莓派折腾实现跳板机
• OnePlus 7 Pro 折腾记

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。