CSS IN JS （polished.js用法）

由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。根据不完全统计，各种 CSS in JS 的库至少有47种。老实说，现在也看不出来，哪一个库会变成主流。

你可能会问，它们与"CSS 预处理器"（比如 Less 和 Sass，包括 PostCSS）有什么区别？回答是 CSS in JS 使用 JavaScript 的语法，是 JavaScript 脚本的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤。我看到一个新的 CSS in JS 库，叫做 polished.js。它将一些常用的 CSS 属性封装成函数，用起来非常方便，充分体现使用 JavaScript 语言写 CSS 的优势。

polished.js提供的其他方法如下，详细用法请参考文档：https://polished.js.org/docs/。

• normalize()：样式表初始化
• placeholder()：对 placeholder 伪元素设置样式
• selection()：对 selection 伪元素设置样式
• darken()：调节颜色深浅
• lighten()：调节颜色深浅
• desaturate()：降低颜色的饱和度
• saturate()：增加颜色的饱和度
• opacify()：调节透明度
• complement()：返回互补色
• grayscale()：将一个颜色转为灰度
• rgb()：指定红、绿、蓝三个值，返回一个颜色
• rgba()：指定红、绿、蓝和透明度四个值，返回一个颜色
• hsl()：指定色调、饱和度和亮度三个值，返回一个颜色
• hsla()：指定色调、饱和度、亮度和透明度三个值，返回一个颜色
• mix()：混合两种颜色
• em()：将像素转为 em
• rem()：将像素转为 rem

参考文章：https://www.ruanyifeng.com/blog/2017/04/css_in_js.html