TailwindCSS 从零开始 - 简单认识 PostCSS

前面有提到安装 TailwindCSS 推荐使用 PostCSS，前面练习的都是没有相依 PostCSS 来练习，但该面对的总是要面对，先来认识一下关於 CSS 的处理，就以一般前端常用的 SCSS 为例。

关於预处理器与後处理器

从字面上可以得知，CSS 的处理可以分为预处理跟後处理 (废话)，相信有切版一段时间的前端工程师都享受到预处理器的方便之处，可以统一命名变数整理关於字型颜色、大小或是各种共用的属性，避免不断输入一样的色码，甚至在大幅修改的时候，可以透过变数免去修改的时间。

预处理器

写的内容浏览器并看不懂，但透过 build 之後编译成浏览器看得懂的 CSS 语法。

像是今天要写一个圆角，可以透过变数撰写颜色，并且可以用 & 延续要做 :hover 效果，不必重新写一次 class 的动作。

demo: https://codepen.io/hnzxewqw/pen/YzQXvVq

SCSS

$bg-primary: red;
$bg-hover:orange;

.box {
	width: 100px;
	height: 100px;
	border-radius: 10px;
	background-color: $bg-primary;
	&:hover{
		background-color:$bg-hover ;
	}
}

编译成 CSS 後

CSS

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: red;
}
.box:hover {
  background-color: orange;
}

是不是超方便，但 SCSS 有一个要注意的地方，如果要使用预处理器，就要使用他所有的包含的内容，不能自行删减，就算你这个专案用不到，但还是需要整个使用。

後处理器

既然能预处理也可以後处理，而 PostCSS 就是属於後处理器，其中方便之处是可以自行增减自己需要的编译的部分，最常用的就是个浏览器的前缀词。套件是这个 autoprefixer

後处理器

直接先看官方范例，下方是要写的样式，

.my-class, #my-id {
    border-radius: 1em;
    transition: all 1s ease;
    box-shadow: #123456 0 0 10px;
}

但如果要自行加上各浏览器的前缀词会变这样，

.my-class, #my-id {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -moz-box-shadow: #123456 0 0 10px;
    -webkit-box-shadow: #123456 0 0 10px;
    box-shadow: #123456 0 0 10px
    }

光是去找相符的浏览器就搞死自己，但是透过後处理器编译後，就可以直接这样了，当然预处理器也可以办到。

那干嘛用後处理器

1. 可以建立自己的套件(plugins)。
2. 使用标准的 CSS 语法。

PostCSS 起手式

• 安装 PostCSS 与其插件。

npm install postcss postcss-loader autoprefixer precss --save-dev

这边有安装刚刚提到的前缀词插件 autoprefixer。

• 安装完後会有一个 postcss.config.js 档案，加入需要用到的 press 与 autoprefixer 套件即可。

所有想要用的扩充套件都要在 postcss.config.js 设定档才行。当然用在 tailwind 的时候就是要在 tailwind.config.js 里面设定。

module.exports = {
  plugins: {
    precss: {}, // 使用类似 SASS 的功能，例如：变数
    autoprefixer: {
      // 加入各家浏览器的前缀词
      browsers: [
        // 指定支援的浏览器版本
        'Chrome >= 52',
        'FireFox >= 44',
        'Safari >= 7',
        'Explorer >= 11',
        'last 2 Edge versions',
      ],
    },
  },
};

这样就可以使用 autoprefixer 的套件了。

参考资料

• PostCSS
• [心得] 什麽是 postcss?
• DAY13 - Postprocessor - PostCss 基本介绍