>

到底有什么东西值得我们去探索,PostCSS深入学习

- 编辑:至尊游戏网站 -

到底有什么东西值得我们去探索,PostCSS深入学习

PostCSS深切学习:你须求掌握怎么

2015/10/28 · CSS · POSTCSS

初藳出处: Kezz Bracey   译文出处:大漠   

如果您想真正的理解PostCSS的话,你就相应尽早学会PostCSS是何等以致怎么着行使它。

在这里个类别中,大家将带您深深了然PostCSS以致怎样行使PostCSS方法。假若你还不曾办好观念筹划去掌握PostCSS能做什么样,那么能够接着那些种类步向学习,那些种类将带您进来到CSS的新世界中间。

PostCss

PostCSS入门

PostCSS在以惊人的快慢发展,何况进一步受人迎接。越来越多的人初阶在询问它,使用它。因为她们发现到,在品种中动用PostCSS让她们发觉到了如今生机勃勃亮。

至尊游戏网站 1

2015年总共不到140万的下载量,但从2014年八月份到五月份曾经超越380万个下载。

Autoprefixer是PostCSS中最风靡的插件,在那之中Google、Shopify、照片墙、Bootstrap和Codepen都在利用这些插件。Wordpress也运用Autoprefixer插件,并且还接收RTLCSS插件。Alibaba行使了多少个PostCSS插件,甚至也参预PostCSS的付出。

除外,Mark Otto也聊起就要Bootstrap v5中引进PostCSS:

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.——@Mark Otto

PostCSS刚刚被CodePen.io引用,可以经过CSS设置中装置:

至尊游戏网站 2

PostCSS正在加强,是神速的滋长,而且从不充足的理由。

简言之点讲,PostCSS是CSS的处理器。假设你以前使用过CSS的预管理器的话,比如Sass、LESS恐怕说Stylus。那多少个是应用预编码来拍卖CSS,然后编写翻译成线上急需采纳的CSS。而PostCSS刚好相反,他是拍卖你写好的CSS,让您的CSS更健康。能够用一张图来大致的陈说:

简单来说

PostCSS是什么?最棒的定义来自于PostCSS本身项目在github上的描述:

“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

简单的说,PostCSS是CSS形成JavaScript的多少,使它产生可操作。PostCSS是基于JavaScript插件,然后施行代码操作。PostCSS自个儿并不会转移CSS,它只是黄金年代种插件,为执行其它的变动扫除万难。

精气神儿上是不曾很制PostCSS插件操纵CSS,相当于说它能够适用于任何CSS。只要你能想到的,你都能够编写制定一个PostCSS插件,让它来转成CSS。

PostCSS插件能够像预处理器,它们能够优化和autoprefix代码;能够增进将来语法;能够加上变量和逻辑;能够提供整机的网格系统;能够提供编码的快速格局……还会有比非常多众多。

至尊游戏网站 3

PostCSS不是怎么样

实际,使用PostCSS插件你可以做别的你想做的别的交事务情,但PostCSS相对来说依旧较新,那也招致了有些误会,工具实际上是何等。

许四人(包罗自己自身在内)对PostCSS未有两个完全的影象,PostCSS实际是怎么着,并为此错失了PostCSS能够提供哪些。

故而在大家继承往下阅读以前,让大家澄清一些作业,PostCSS不是哪些?

1

PostCSS不是预管理器

广大开采人员说她们不情愿抛弃当前应用的CSS预管理器来支持PostCSS。与此同期,他们更赏识预处理器而不希罕PostCSS。而实质上是,PostCSS并不是多少个预管理器

是的,假若您愿意,你一丝一毫能够把它当做为贰个预管理器,但你相对未有像使用预管理器那个效果。你还是能承接使用你最爱怜的预管理器,并且能整合PostCSS一齐利用。

上海体育场所也报告大家,在这里个进程中有无数插件。那么些插件正是PostCSS的插件,何况那些插件都是行使JavaScript写的。意在言外,你能够接纳JavaScript基于PostCSS宗旨的Core上编写制定任何你想要的一款成效的插件。也因为这几个缘故,PostCSS的插件生态圈特别的强有力,最布满的正是Autoprefixer、cssnext之类的。当然还或然有任何的,那也是PostCSS能在社区急速升高状大的案由之大器晚成。小编自个儿大多时候常把PostCSS的插件生态作为是NPM的生态。当时你思量就知道了。

PostCSS不是后计算机

PostCSS名称中有八个”post”单词,但它不是贰个当真的”后计算机“。后计算机日常被视为在成功的样式表中依照CSS标准处理CSS,让其更实用,常做的风华正茂件业务正是给CSS属性添加浏览器私有前缀。然则,PostCSS并不局限于这种操作。正如上面提到的,它能够像贰个预管理器。

最佳的也正是视PostCSS为Computer。PostCSS创设者Andrey Sitnik在推特(Twitter)上那样描述的:

It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it.https://github.com/postcss/postcss …

马克西姆e Thirouin作为PostCSS进献者和插件开拓人士,他在Facebook上说,PostCSS中的”post”指的是加工,它能够让CSS变得越来越好,以至是越过CSS。

It’s not post-processing if it happens before hitting the browser. @prefixfree is a post-processing tool. @PostCSS is not.——by @HugoGiraudel


@HugoGiraudel nobody in postcss contributors is using this expression anymore. Now it is Postcss like “css and beyond” —— by @MoOx

有了PostCSS,大家并无需扬弃以前所耳闻则诵的Sass或LESS之类的,你的开采方式能够那样:

PostCSS不是前程的新语法

有一点点绝妙的PostCSS插件允许你写今后的语法,即便这几个CSS语法尚未获得大规模帮助。可是PostCSS实际不是天然下来就支持今后语法。

有局地开辟人士表示不乐意利用PostCSS就是以此原因之生龙活虎,因为他们不精晓怎么让自身适应去写以往的CSS。但是,写现在的语法只但是是选拔PostCSS之意气风发。

至尊游戏网站,若果你筛选了,PostCSS完全改观您的支出进度。

至尊游戏网站 4

PostCSS不是二个清理/优化学工业具

Autoprefixer插件成功的产生了大家对PostCSS的三个广大看法:PostCSS是用来清理CSS、优化速度和管理跨浏览器宽容性。直到今日,作者上学了PostCSS多量的插件,我有了温馨的观念。

是的,有好些个奇秒的插件提供了清理和优化代码画能,但那也仅是PostCSS一小部分。

2

PostCSS不独有是风流洒脱件职业

PostCSS最显明之处在于它不囿于于其余意气风发种类型功效,它是完全能够定制的,可配置的,能够说效果与利益是最为的。

正如WordPress插件。电子商务插件是老大受接待的,但不曾人觉着WordPress自己作为一个电子商务引擎和WordPress的亮点亦非仅给电子商务插件服务。

就PostCSS来讲,小编更赏识把它看做是通辽治。本人看上去非常少,但那多亏它存在的意思。那也注脚了“空”的含义正是它为什么会有与此相类似多的潜能。它的力量是黄金年代种Infiniti的美妙绝伦的馅料,足以令你感觉惊惶。

品味一个蒜蓉的毕节治和温馨不希罕的。你早晚未有理由不选取好的而筛选长久单风华正茂类型的松原治。相反,继续尝试一下往宝鸡治中填写自个儿喜好的酱料,你可能会发觉一些新味道,让其成为你生活中的风姿洒脱有的。

应用Sass先编写翻译成CSS,然后通过PostCSS对编写翻译好的 CSS做优化管理。让协和的代码更为健康。当然你也得以一贯本人依据PostCSS定制风流罗曼蒂克款切合你和谐的预管理器。

是怎么样让PostCSS变得特别

PostCSS是后生可畏种截然两样的编写制定CSS的法子。前端将其陈说为”PostCSS是生机勃勃把Switzerland军刀”,这是三个全然适用的陈述。

接下去,让大家看看PostCSS有如何特别的地方。

PostCSS不是如何

它的插件生态系统提供分化的成效

像PostCSS本人同样让人诧异的是,它有无数莫衷一是的插件,那也是让PostCSS发光之处。当您看见PostCSS在GitHub上的可用插件列表,你会意识其兼具五颜六色标功效。

那个插件允许你使用新语法、颜色函数、conic-gradient、自定义属性、自定义接纳器、媒体询问的别名以至越来越多。

还应该有备用插件来缔造古板的语法,比方将十五制颜色换来rgba()颜色、给IE8的opacity加多滤镜,给IE8推出伪成分选用器,神速将px转换成rem等等。

还足以扩充插件,包蕴丰硕变量、mixin、条件、循环、BEM和SUIT类名等等。

慎选颜色的治本插件,允许颜色从风华正茂种格式转变来另风度翩翩种格式,更正颜色的alpha值,结合色彩,生成更融洽的配色方案等等。

有网格系统,优化学工业具,缩写以致分析报告的插件等等。

脚下插件不断的更加的多,这里小编法一生机勃勃罗列出来,假若感兴趣,能够细心阅读那个插件列表。

纵然表面上它看起来是三个预管理器,其实它不是一个预管理器

模块化

单向,PostCSS具备很可用的插件,你能够借助本身所需尽量使用多的精选或尽或然少选取。

假使仅想用PostCSS让CSS是更有功能和让浏览器更温馨的话,加载一些优化插件,你就能够闪人了。

生龙活虎旦仅想用POstCSS作为预管理器的话,使用部分语言扩展插件就OK。

PostCSS的基本原理是粒子化,模块化。简单的讲,未有拍卖多少个效果与利益的笨重插件。相反,每创造多个插件,就是二个效果。

例如说,你能够遵照本人和睦心爱的语法做取舍和成立本身或自定义本人的预管理器。或许,你能够加载PerCSS包,能够自动访谈多少个语言的恢宏插件。

任凭你是想行使PostCSS什么效果与利益,你都只须求基于你谐和一定目虞升卿装所需的插件。意思便是说,你没有须要设置任何依附的插件。

纵然表面上它看起来是二个后计算机,其实它亦非四个后计算机

快3倍的快慢

其它PostCSS测量试验速度高速,其有七个原因:其风姿罗曼蒂克你只要求加载必要的插件;其二它是运作在JavaScript上。

你能够利用benchmark运作那几个条件。

上边是三个测验数据对测验做了详实分析,测量检验了嵌套法规、变量和总计:

PostCSS: 36 ms Rework: 77 ms (2.1 times slower) libsass: 136 ms (3.8 times slower) Less: 160 ms (4.4 times slower) Stylus: 167 ms (4.6 times slower) Stylecow: 208 ms (5.7 times slower) Ruby Sass: 1084 ms (30.1 times slower)

1
2
3
4
5
6
7
PostCSS:   36 ms
Rework:    77 ms   (2.1 times slower)
libsass:   136 ms  (3.8 times slower)
Less:      160 ms  (4.4 times slower)
Stylus:    167 ms  (4.6 times slower)
Stylecow:  208 ms  (5.7 times slower)
Ruby Sass: 1084 ms (30.1 times slower)

即使它可以有支持、补助今后的语法,其实它不是前途语法

可以创制任何本人想要的插件

PostCSS是用JavaScript编写的插件,那样只要能编写JavaScript的就足以创制二个投机想要的插件,达到和煦的目标。值得庆幸的是,固然你不是正统的JavaScript开荒职员,但采取PostCSS开拓插件也就只需求短短的几个小时,就能够支付出一个全职能的插件。

在档期的顺序中运用像Stylus、Sass和LESS这样的预管理器能很好的干活,但它们不可能产生种种人的一切。必得决定怎么着特征能更加好的为她们的客商群众体育服务。譬如说,固然你想要贰个功用,你能够做这样的功能,但它有相当大概率会被其余人在品种中利用,但也很有相当的大可能率其余人在档案的次序中无需使用。如法自由的组成到品种须要中。

就算有贰个功能必要被感到切合项目必要,但项目珍惜人士或者从卯时间去支付它。假诺您协和又不有所那上头的技能水平,那么您也必须要想想而以,不能够接纳上。

可是选用PostCSS,你没有必要问任哪个人。倘让你想要二个新性情,你自身全然能够做到。从自家要好的阅历来讲,只要你略懂点JavaScript才具或经历,你就足以利用PostCSS创建协调需求的效用插件,何况自个儿是全然可控的。

在本类别前边的学科中,将经过成立多少个PostCSS插件为例,告诉你怎么着创造PostCSS插件步骤。即便你以为本身不是壹位JavaScript行家,作者认为你也会开掘自身完全能够创设三个PostCSS插件。

尽管它能够提供清理、优化代码那样的功能,其实它不是清理、优化代码的工具

您能够像使用CSS同样选择PostCSS

大多数PostCSS插件没有必要使用自定义的语法,其实它正是非凡的预管理器。相反,它们可以动用常规的CSS语法。那也意味着,你能够接受PostCSS就像是使用CSS相似。比方说,你要产生七个前端框架,你一丝一毫能够应用旁人项目中的文件,比方Normalize.css文件。

那也象征,你无需固定使用一个新鲜的预处理器,比如说Stylus、Sass或LESS,因为您总是能够利用PostCSS编写翻译后的CSS。比方,你使用Sass编写的Foundation,完全可以运用PostCSS的优化和前途语法的插件生成新的CSS文件。

它不是其他生龙活虎件职业,那也意味者它潜在的能量无限,你可以依据本身的内需布署你须求的效应

PostCSS库不会绑定到多少个管理器上

虽说过去他俩可能直接使用Stylus、Sass或LESS来编排一个库,但大家也初叶观望有人通过PostCSS来创制整个库。

例如,Cory Simmons眼看应用Stylus和Sass编写了叁个网格系统,他的客户群众体育只对应运用Stylus和Sass的客户。随后她利用PostCSS移植了那些网格系统,那也意味现在各样人都足以使用了,包手Stylus、Sass客商,以至是运用LESS或不行使此外预管理器的人。

PostCSS特别之处

PostCSS能够与风行工具无缝衔接

出于PostCSS是基于JavaScript编写,所以它无需你安装Ruby等,並且你能够将其集成在四个开荒者工具中。

  • PostCSS插件能够通过Grunt,Gulp,Webpack,Broccoli,Brunch和END等工具一同行使
  • CodePen同意你利用PostCSS
  • Prepros支持Autoprefixer和cssnext插件
  • postcss-use插件允许你使用简单的CSS法则加载其余插件
  • 您可以应用三个package.json文件,通过npm能够在指令终端输入npm install电动安装别的PostCSS插件。那样能够在档期的顺序中国共产党用PostCSS插件,也不用担忧插件的配备与转变

咱俩将因而本连串的“快捷入门指南”那部分报告大家怎么设置和行使PostCSS,敬请期望。

各类化的坚决守护插件,创设了二个生态的插件系统

到了计算的时候了

您供给精通的率先件事情便是PostCSS速度神速,那并从未丰盛理由,所以以往是时候该清晰的领会它,并赞助你哪些在开拓进程中接收PostCSS。

基于你须求的性子开展模块化

PostCSS不是什么样

  • 就算表面上它看起来是多少个预管理器,其实它不是一个预管理器
  • 固然表面上它看起来是叁个后Computer,其实它亦非二个后Computer
  • 固然它可以有利于、扶植今后的语法,其实它不是鹏程语法
  • 尽管它能够提供清理、优化代码那样的法力,其实它不是清理、优化代码的工具
  • 它不是任何大器晚成件事情,那也意味者它潜在的能量Infiniti,你能够依据自个儿的急需配备你要求的功力

快捷编写翻译

PostCSS非常之处

  • 八种化的意义插件,创立了八个生态的插件系统
  • 依照你须要的特点开展模块化
  • 高效编写翻译
  • 创设和睦的插件,且具可访问性
  • 可以像普通的CSS相通接纳它
  • 不依据于别的预管理器就具有成立一个库的力量
  • 能够与众多盛行工具创设无缝安顿

创办和煦的插件,且具可访谈性

“PostCSS浓重学习”种类

本类别中,我们将透过下边的不计其数教程告诉您什么选拔PostCSS:

  • PostCSS长远学习: 设置选项
  • PostCSS深刻学习: 居尔p配置
  • PostCSS浓郁学习: Grunt配置
  • PostCSS浓郁学习: 搜求插件

也会看看多少个例外应用PostCSS的不二等秘书技:

  • 跨浏览器
  • 调整和减弱和优化
  • PreCSS预管理器
  • 概念自个儿的预管理器
  • 结合Stylus、Sass或LESS
  • CSS的BEM或SUI方法
  • 火速键与缩写
  • PostCSS的语法糖

最后大家将带您成立协调的叁个PostCSS插件。

您可能会小心到,PostCSS使用教程很非常不够。首要的缘由是远远不够介绍今后CSS的插件。而见到的cssnext看起来要经历一回大变革,不小恐怕地会改为所需步骤。由此,大家也会专一它,给我们带来叁个斩新的教程,让我们好过渡。

因此让大家起先吧!在接下去的科目中大家将会真的接进去到“快速入门指南”类别,并向您出示使用PostCSS的最快情势。大家直接期待吧…(^_^)

1 赞 1 收藏 评论

至尊游戏网站 5

能够像普通的CSS相似使用它

不依赖于别的预管理器就具备创制四个库的力量

能够与广强风行工具创设无缝安排

它的插件生态系统提供差别的效果

像PostCSS自个儿同样让人惊喜的是,它有为数不菲不如的插件,那也是让PostCSS发光之处。当你看来PostCSS在GitHub上的可用插件列表,你会意识其负有五颜六色的成效。

模块化

三头,PostCSS具备很可用的插件,你能够依据本人所需尽量使用多的取舍或尽或许少选择。

只要仅想用PostCSS让CSS是更有功用和让浏览器更友好的话,加载一些优化插件,你就能够闪人了。

倘诺仅想用PostCSS作为预管理器的话,使用部分语言扩大插件就OK。

PostCSS的基本原理是粒子化,模块化。简单的讲,未有拍卖三个作用的笨重插件。相反,每成立三个插件,正是贰个功用。

能够创建任何本身想要的插件

PostCSS是用JavaScript编写的插件,那样只要能编写JavaScript的就足以创造三个友好想要的插件,达到和煦的指标。值得庆幸的是,就算你不是标准的JavaScript开采人士,但接收PostCSS开荒插件也就只供给短短的多少个钟头,就足以付出出一个专职能的插件。

您能够像使用CSS肖似使用PostCSS

大多数PostCSS插件不须要接纳自定义的语法,其实它就是百里挑少年老成的预管理器。相反,它们能够动用常规的CSS语法。那也意味着,你能够使用PostCSS就像是使用CSS同样。比如说,你要到位叁个前端框架,你一丝一毫可以利用旁人项目中的文件,譬如Normalize.css文件。

PostCSS库不会绑定到贰个计算机上

尽管过去他俩只怕直接利用Stylus、Sass或LESS来编排一个库,但大家也开端观看有人通过PostCSS来创立整个库。

除此以外有一本书特别介绍PostCSS:

至尊游戏网站 6

将在上架

那是一Bend文书,听大人讲普通话版本相当的慢要上架了。要是喜欢的话,能够关切一下。

最后提到一点,各部分仿效资料以致案例的同伙们可来本人的前端群:621071874,这里有小编搜聚到的各部分材质甚至案例,望能帮到各位。

本文由硬件数码发布,转载请注明来源:到底有什么东西值得我们去探索,PostCSS深入学习