PostCSS + PreCSS 拯救前端样式

CSS作为我大前端必不可少的一部分，在前端发展如此迅速的今天，实在是拖了很大的后腿，所以我们几乎已经离不开CSS处理器了。

回顾 Sass 和 LESS

首先，这俩货都是兼容CSS的，所有的开发都是在CSS的基础上进行扩展，从我个人角度来看，开发体验是不错的。
大部分情况下，Sass和LESS其实并没有什么区别，这篇文章列举了一些差异，这里就不多说了。
总的来说，这俩货其实都不错，但是：

• Sass安装太慢，需要编译。
• 他们都需要额外的插件来支持autoprefixer等常见处理。
• 不能直接使用最新的CSS特性，如变量、calc。

遇见 PostCSS + PreCSS

说到 PreCSS，就不得不先说说 PostCSS。
PostCSS其实也是一个CSS预处理器，它的独特之处在于强大的插件机制和丰富的插件，几乎是我在CSS开发中的标配。换言之，即使我用了Sass或者LESS，还是免不了要加上PostCSS来做前缀处理（autoprefixer）、压缩（cssnano）等后续操作。

那么问题来了：能不能减少一些依赖，只用PostCSS+插件就得到不错的CSS开发体验呢？

于是我发现了PreCSS。下面看看它的特别之处：

• 基于 PostCSS Preset Env ，支持各种强大的新语法，可以按需编译成指定浏览器版本支持的CSS。

• 支持大部分Sass语法。前提是要指定 parser: require('postcss-scss')。
  很棒有没有？安装无需编译，Sass代码几乎可以无缝迁移。

• 得益于PostCSS，可以轻松地结合其他功能，比如：

  • 结合 postcss-import 实现alias，让 @import 更加简洁。
  • 使用 postcss-calc 在编译阶段进行计算，减少不必要的 calc ，而开发时用 calc 更清晰。
  • 使用 postcss-plugin-px2rem 将px转成rem，适配各种屏幕。

于是，只需安装 PostCSS，加上一份这样的配置（.postcssrc.js），一个强大的CSS预处理工具就出来了：

module.exports = {
  // Transform inline comments
  parser: require('postcss-scss'),
  plugins: [
    require('autoprefixer'),
    // Transform SCSS into CSS
    require('precss'),
    // Calculate at compile time
    require('postcss-calc'),
    // px to rem
    require('postcss-plugin-px2rem')({ rootValue: 100, minPixelValue: 2}),
  ],
};

以码服人

自定义 media query

@custom-media --iphonex (only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3));

main {
  @media (--iphonex) {
    margin-top: 50px;
  }
}

CSS变量

:root {
  --mainColor: #12345678;
}
body {
  color: var(--mainColor);
}

Sass语法

$blue: #056ef0;

.menu_link {
  background: $blue;
}

calc计算

$column: 200px;

.menu {
  width: calc(4 * $column);
}

MixIn

// src/common/mixin.css
@mixin iphonex {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { @content; }
}

// src/pages/index/style.css
@import '#/common/mixin.css';

@include iphonex {
  main {
    margin-left: 50px;
  }
}

好了，还等什么，快来用 PostCSS + PreCSS 吧。