说说PostCSS

时间：2023-03-31 00:50:34 CSS

前言现在的前端，javascript的发展是有目共睹的，框架也很多。与此同时，html也在齐头并进，HTML5标准出台并得到普及。这样的发展只缺一个字？CSS，这个看似微不足道的家伙，在开发中却扮演着与js同等重要的角色。css，一种样式脚本，似乎和编程语言有一定的距离，我们可以把它理解为一种描述方式。这似乎导致css被淡化。然而，css近几年正在发生一个很大的变化——CSSModule。记得js的井喷期应该说是node带来的，带来了模块的概念，可以工程化js来开发项目。嗯，今天的css会越来越好。如果喜欢我的文章，请点赞，欢迎Star~。欢迎关注我的github博文既然是宣传PostCSS的文章，那么我们首先要了解它是什么，它和我们之前讲的CSSModule有什么关系呢？让我在这里告诉你一切。我想和你说再见。目前在工程开发中，用得最多的应该是Less、Sass和Stylus。首先，让我们介绍一下。它们有一个统一的名字——css预处理器。什么是CSS预处理器？应该是可以把你写的格式按照它的规则转换成css的东西（说的简单点）。它们的出现可以说是恰逢其时，解决了css的一些缺点：语法不够强，不能嵌套编写，不利于模块化开发，没有变量和逻辑复用机制，导致CSS属性值只能使用字面量形式，重复的样式重复写，难以维护。面对以上问题，css预处理器给出了一个非常可行的解决方案：变量：与其他编程语言一样，免于多次修改。Sass：使用“$”声明变量，变量名和变量值用冒号分隔Less：使用“@”声明变量Stylus：声明变量没有限制，末尾的分号是可选的，但是变量名和变量值之间必须有一个“等号”。但需要注意的是，如果你用“@”符号声明一个变量，Stylus会编译它，但不会赋值给该变量。也就是说，Stylus不使用“@”来声明变量。Stylus中调用变量的方法与Less和Sass完全相同。作用域：有了变量，就必须有一个可管理的作用域。就像js一样，它会从局部作用域中查找变量。Sass：它的写法是三者中最差的，没有全局变量的概念更倾向于命令式搜索的嵌套：对于css来说，嵌套的写法无疑是完美的，更像是父子层次关系清晰。这里三者的处理是一样的，用“&”来表示父元素有了这些方案，我们就可以在保证DPY、可维护性和灵活性的前提下编写css样式了。回到正题，之所以会出现预处理器这样的解决方案，归根结底还是CSS标准制定滞后造成的。同时，我们也应该想一想，预处理器真的够用吗？往往在项目过大的时候，由于缺乏模块的概念，全局变量的问题会一直困扰着你。每当您定义选择器时，请始终考虑是否在其他文件中使用了相同的名称。毕竟，项目是针对团队的，而不是针对个人的。有办法解决这些问题吗？前人的方法由来已久的css命名冲突。可以说我们前端开发者每天都在苦思冥想，如何优雅的解决这些问题。CSS没有js那样的AMD、CMD、ES6Module的模块化方案。那么，回到问题，如何解决呢？我们的前辈们也提出了不同的方案：Object-OrientedCSSBEMSMACSS方案可以说是层出不穷，团队内部也有很多方案。但它们中的大多数都有一个共同点——为选择器添加前缀。这是一个手动工作，你可能需要手动编写很长的选择器，也许你可以使用预编译的css语言。然而，它们似乎并没有解决为什么会导致这种缺陷的根本问题。让我们看一下使用BEM规范编写的示例：每次写成这样，估计自己是程序员，得加班了，哈哈！一个希望现在的网页开发强调组件化的思想。因此，急需一种可行的cssModule方法来完成网页组件的开发。从2015年开始，CSS-in-JS（典型代表，react的styled-components）开始在国外流行起来，还有一个就是CSSModule。本文谈的是后者。如果你需要了解前者，你可以自己谷歌。对于css，大家都知道它是一种描述性语言，不具备动态性。那么，如何形成一个模块。我们来看一个使用postcss的react的例子：//example.css.article{font-size:14px;}.title{font-size:20px;}之后，把这些名字弄乱：.zxcvb{font-size:14px;}.zxcva{font-size:20px;}命名相应的内容放入JSON文件中：{"article":"zxcvb","title":"zxcva"}之后，在js中使用files:importstylefrom'style.json';classExampleextendsComponent{render(){return(

复制代码)}}这样，一个css模块的原型就被描绘出来了。当然，我们不可能每次都手动写这些东西。我们需要自动化的插件来帮助我们完成这个过程。之后，我们应该先看看postCSS。我需要了解你什么是PostCSS？或许，你会认为它是一个预处理器，或者是一个后处理器等等。其实，没什么。可以理解为插件系统。使用方法从GitHub主页上的介绍：PostCSSisatoolfortransformingCSSwithJSplugins。这些插件可以支持变量和混合、转换未来的CSS语法、内联图像等。您可以将它与预处理器一起使用，也可以在本机css中使用它。它支持所有这些，并且拥有庞大的生态系统。比如你可能用到的Autoprefixer是一款非常流行的PostCSS插件，被Google、Shopify、Twitter、Bootstrap、CodePen等公司广泛使用。当然我们也可以在CodePen中使用：这里推荐大家看一下PostCSS的深入系列接下来我们看一下PostCSS的配置：这里使用webpack+postcss+postcss的组合-loader+cssnext+postcss-导入。首先，我们可以通过yarn安装这些包：yarnadd--devwebpackextract-text-webpack-plugincss-loaderfile-loaderpostcsspostcss-loaderpostcss-cssnextpostcss-import然后，我们配置webpack.config.js：constwebpack=require('webpack');constpath=require('路径');constExtractTextPlugin=require('extract-text-webpack-plugin');module.exports={context:path.resolve(__dirname,'src'),entry:{app:'./app.js';},module:{loaders:[{test:/\.css$/,use:ExtractTextPlugin.extract({use:[{loader:'css-loader',options:{importLoaders:1},},'postcss-loader',],}),},],},输出:{path:path.resolve(__dirname,'dist/assets'),},插件:[newExtractTextPlugin('[name].bundle.css'),],};然后在根目录配置postcss.config.jsmodule.exports={plugins:{'postcss-import':{},'postcss-cssnext':{browsers:['last2versions','>5%'],},},};之后就可以在开发中使用cssnext的特性了";/*shared/colors.css*/:root{--color-black:rgb(0,0,0);--color-blue:#32c7ff;}/*shared/typography.css*/:root{--font-text:"FFDIN",sans-serif;--字体粗细：300；--line-height:1.5;}/*组件/文章。css*/.article{字体大小：14px；&a{颜色:var(--color-blue);}&p{颜色:var(--color-black);字体系列：var(--font-text);字体粗细：var(--字体粗细)；行高:var(--行高);}@media(width>600px){最大宽度：30em；}}最后使用webpack编译即可。综上所述，PostCSS在国内还没有很流行，但相信在不久的将来会逐渐流行起来，国内的资源很少。不过最近大摩老师翻译的新书上架了——《深入PostCSS Web设计》。有兴趣的也可以看看，学习一些前言。本文只是对PostCSS的一般介绍。鉴于国内资源不足，参考了国外的博文教材，下面会有链接。如果您对我写的内容有任何疑问，可以发表评论。如果我写的有错误，请指正。如果你喜欢我的博客，请关注我~哟。让我们一起总结，共同进步。欢迎关注我的github博客参考链接PostCSS-modules:makeCSSgreatagain!PostCSSDeepDive:WhatYouNeedtoKnow