PostCSS 是个什么鬼东西

PostCSS 是个什么鬼东西

PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。
PostCSS 已经被许多大公司使用：谷歌，推特，阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。
PostCSS 可以作为预处理器使用，类似：Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具，比之前那些快3-30 倍，而且功能更强大。
PostCSS 包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。
简而言之，PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。
本质上是没有很制PostCSS插件操纵CSS，也就是说它可以适用于任何CSS。只要你能想到的，你都可以编写一个PostCSS插件，让它来转成CSS。
PostCSS插件可以像预处理器，它们可以优化和autoprefix代码；可以添加未来语法；可以添加变量和逻辑；可以提供完整的网格系统；可以提供编码的快捷方式......还有很多很多。
事实上，使用PostCSS插件你可以做任何你想做的任何事情，但PostCSS相对而言还是较新，这也导致了一些误解，工具实际上是什么。
许多人（包括我自己在内）对PostCSS没有一个完整的印象，PostCSS实际是什么，并因此错过了PostCSS可以提供什么。2017-07-28

postcss是一个css的框架，平常所写的css，都是一个个的class，维护起来比较困难。在使用了postcss之后，可以在css中体现出元素之间的上下级关系，如果要删除一个模块，则可以直接删除对应的css代码块。
代码类似下面这样
.reportChart {
width: 100%;
background-color: rgba(0,0,0,0.25);
margin-top: 22px;

& .widget {
background-color: rgba(0,0,0,0.25);
padding-bottom: 22px;
}

& .title {
background-color: rgba(0,0,0,0.2);
height: 48px;
line-height: 48px;
color: rgba(255,255,255,0.7);
margin-bottom: 1.57rem;
}

& .action {
display: inline-block;
float: right;
padding-right: 1.57rem;

& span{
cursor: pointer;
font-size: 16px;
}
}
}2017-09-21