您须要知道什么,改革PostCSS的4大认知误区

PostCSS深刻学习:你须求理解怎么着

2015/10/28 · CSS · POSTCSS

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

如果你想真正的精通PostCSS的话,你就应有尽早学会PostCSS是何许以致怎样选取它。

在这里个种类中,大家将带您浓厚摸底PostCSS以至怎样使用PostCSS方法。假诺您还从未做好观念筹算去打听PostCSS能做如何,那么能够跟着那些类别步入学习,那些类别将带你步入到CSS的新世界中间。

PostCss

PostCSS-Comn

PostCSS-Comn使用验证,整合PostCSS常用功效
GitHub:https://github.com/NalvyBoo/PostCSS-Comn

市情七月经有好些个的前端工具,再来引进新的前端工具,价值大十分的小?那第生龙活虎决议于,它是还是不是给开拓人士提供了新的成效,是还是不是值得花时间和生机去学学和接纳?

PostCSS入门

PostCSS在以惊人的进度前行,何况进一步受人迎接。更加多的人起始在摸底它,使用它。因为她俩开采到,在档期的顺序中采取PostCSS让他们发觉到了日前生机勃勃亮。

图片 1

二〇一五年总共不到140万的下载量,但从二〇一五年三月份到十二月份已经超越380万个下载。

Autoprefixer是PostCSS中最盛行的插件,个中Google、Shopify、Twitter、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更不荒谬。能够用一张图来大约的叙说:

插件功用

  • 帮助CSS现在语法
  • 自动补全浏览器私有前缀
  • CSS预管理(整合Sass、LESS或Stylus成效,语法基本和Sass的风度翩翩律卡塔尔
  • 透过@import,整合多少个CSS文件
  • 将同生龙活虎的CSS媒体询问准则统后生可畏为贰个
  • 压缩CSS文件
  • 给rgba颜色创造降级方案(增多备用颜色)
  • 给opacity提供降级方案(给IE浏览器加多滤镜属性卡塔尔国
  • 让IE8支持rem单位
  • 将伪成分的::转换为:(IE8不支持::)

PostCSS并发时有三个很风趣之处。像sass和less那个根本做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

动用验证

  1. 全局安装Gulp
  2. 复制客栈文件到品种目录(PostCSS文件夹 内的内容卡塔 尔(英语:State of Qatar)
  3. 指令终端运营:npm install(Tmall镜像使用该命令:cnpm install
  4. src文件夹 为编辑源文件,css文件夹 为扭转代码文件
  5. src文件夹 目录下命令终端运营:gulp css
  6. css文件夹 内查看编写翻译后结果

让咱们先消弭风姿洒脱部分PostCSS不足为道的认识误区,那样能够看来它是什么加强你的工效,更改你的css编码专门的学问的。

PostCSS不是怎么样

骨子里,使用PostCSS插件你能够做其余你想做的别的事情,但PostCSS相对来说照旧较新,那也诱致了有的误会,工具实际上是哪些。

不少人(包含自己要还好内卡塔尔国对PostCSS未有二个全部的回想,PostCSS实际是何许,并就此失去了PostCSS能够提供什么。

进而在大家继续往下阅读在此之前,让我们澄清一些事情,PostCSS不是怎么?

1

语法介绍

  • PreCSS语法介绍

唤醒:假设你想掌握PostCSS是什么样及怎样设置使用它,请看《PostCSS简介》,然后再再次来到放那篇作品。

PostCSS不是预微电脑

相当多开荒职员说他俩不甘于吐弃当前利用的CSS预微处理机来支撑PostCSS。与此同一时候,他们更爱好预微电脑而不爱好PostCSS。而事实上是,PostCSS并非叁个预微电脑

准确,假如你愿意,你一丝一毫能够把它当做为三个预微电脑,但你相对没有像使用预微处理机那三个效果。你以致能够继续应用你最赏识的预微机,并且能结成PostCSS一同使用。

上海体育场面也报告大家,在此个历程中有好些个插件。这一个插件正是PostCSS的插件,何况那么些插件都是选择JavaScript写的。大有文章,你能够应用JavaScript基于PostCSS核心的Core上编写制定任何你想要的风姿浪漫款效果的插件。也因为这一个原因,PostCSS的插件生态圈特别的刚劲,最广大的就是Autoprefixer、cssnext之类的。当然还应该有其余的,那也是PostCSS能在社区高效发展状大的缘故之风流倜傥。我要好好些个时候常把PostCSS的插件生态作为是NPM的生态。这时你出主意就领悟了。

以下内容为自定义进级

误区1-把PostCSS看成是前微型机或后Computer

先从PostCSS里最轻易误解的点说到。

PostCSS发布时,它被定义和细分为三个“后计算机”。PostCSS插件早前就是行使有效的CSS,并因此各类插件对其举行扩张和拍卖,不像别的一些预微机那样,须要一定语法和编写翻译,才足以收获平价的CSS。

说PostCSS是叁个后Computer,也是风华正茂种错误的指导的。正确的说应该称它为CSS微电脑,PostCSS使用插件,在CSS生成过程中,施行了多少个任务对CSS代码进行拍卖。

PostCSS的片段插件,也和SASS这几个预微型机同样定制了温馨的语法,并经过编写翻译把代码转产生有效的CSS。像PostCSS Nested插件,定义了选取器嵌套的语法,其职能和SASS和LESS实现的嵌套肖似。此外一些PostCSS插件都是拍卖有效的CSS,并经过扩展它,去完毕样式职业的。个中相比有名的插件Autoprefixer,它会在扩散的CSS中,自动为部分体裁增多浏览器前缀,然后生成最后的CSS。

再有部分PostCSS插件,并不管理CSS代码,它只会翻动CSS代码。如:Stylelint会去检验CSS,还应该有像Colorguard会维持CSS中负有颜色值格式大器晚成致。

除开下边说的,PostCSS还能编写翻译SASS和LESS的源文件,输出规范的CSS。能够因此PostCSS插件,来管理和扩张名称叫.scss的SASS文件。更详实的上边第2条会说。

改过首个认知误区:PostCSS,即不是预管理亦不是后甩卖。它是一个CSS微机,能够在事业中,扩充和测验CSS样式代码。

PostCSS不是后Computer

PostCSS名称中有三个”post”单词,但它不是一个实在的”后Computer“。后电脑平日被视为在成功的样式表中依据CSS规范管理CSS,让其更实用,常做的风度翩翩件工作正是给CSS属性增加浏览器私有前缀。可是,PostCSS并不囿于于这种操作。正如上边提到的,它能够像多个预微机。

最棒的也正是视PostCSS为Computer。PostCSS成立者Andrey Sitnik在Instagram上那样汇报的:

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

马克西姆e Thirouin作为PostCSS进献者和插件开垦人士,他在推特(TWTR.US)上说,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-Comn插件扩大

以扩展postcss-will-change插件为例

安装插件 项目目录下执行命令行

$ npm install postcss-will-change --save-dev

配置gulpfile.js文件

// 添加此行
var will_change = require('postcss-will-change');

gulp.task('css', function () { 
    var processors = [
        // 添加此行
        will_change
    ]; 
});

做到 推行命令查看效果

gulp css

误区2-PostCSS是另壹个像SASS和LESS的预微处理器

开辟者一个广大的误解是,PostCSS是另一个像SASS和LESS的预微机。

信赖广大人利用PostCSS插件,会把专注力放到模仿此外预管理个性上,如变量,条件语句,循环和混入。随着PostCSS的前行,相当多其余功效的插件被开拓出来,有非常多通通和古板的预微电脑差别的新性格被引入。

您能够把PostCSS,当成像SASS和LESS那样的预微电脑使用,你也足以用部分像SASS,LESS的强大,来进步你的工具集。

PostCSS能够解析CSS和SCSS语法,那样你能够运用PostCSS插件来,保持您原本的编码风格。举例,在这里时此刻项目中,作者能够采纳PostCSS的Stylelint插件,在编写翻译早前就去检查评定你的SCSS代码。产生的CSS代码,通过Autoprefixer和postcss-assets去丰富浏览器前缀和行内图片的dataurl。

办事流程如下图:

 图片 4

本来最后,你是不是选拔接受PostCSS领导权在您。若是你只把它当成预微电脑使用,也能够。但想让SASS和LESS那样的预管理工具,具有上边这样新的性状,它们是做不到的。

PostCSS不是今后的新语法

有大器晚成对杰出的PostCSS插件允许你写现在的语法,固然那些CSS语法尚未得到广大协理。但是PostCSS并非天生下来就协助今后语法。

有局地开荒人士表示不情愿利用PostCSS就是以此原因之风流洒脱,因为她俩不精通怎么让投机适应去写今后的CSS。但是,写以后的语法只可是是接纳PostCSS之生龙活虎。

借使您选取了,PostCSS完全改观您的费用进度。

图片 5

PostCSS配置与命令

Taobao镜像npmcnpm(写命令时,将npm换成cnpm,别的与npm语法相像卡塔 尔(阿拉伯语:قطر‎

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

全局安装gulp
就算早先有安装过七个大局版本的 gulp,请实践一下npm rm --global gulp来制止和gulp-cli冲突

$ cnpm install --global gulp-cli

品类设置gulp(项目根目录下卡塔尔

$ cnpm install --save-dev gulp

配置package.json文件

{ 
    "name": "PostCSS-Comn", 
    "version": "0.0.1", 
    "description": "PostCSS gulp plugin", 
    "keywords": [ 
        "gulpplugin", 
        "PostCSS", 
        "css" 
    ], 
    "author": "ningbo", 
    "license": "MIT", 
    "dependencies": { 
        "postcss": "^5.0.0", 
        "gulp": "~3.8.10" 
    }, 
    "devDependencies": { 
        "gulp-postcss": "^6.0.1" 
    } 
}

安装gulp-postcss(项目根目录下卡塔尔

cnpm install --save-dev gulp-postcss

配置gulpfile.js文件,src文本为css编辑文件,css文本为编写翻译生成文件

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('css', function () { 
    var processors = [
    ]; 
    return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./css')); 
});

测试(在src中创建测量检验文件style.css

.test{
    background: black;
}

测验运维命令,在css文本查看style.css

$ gulp css

添加PostCSS插件:Autoprefixer(管理浏览器私有前缀),cssnext(使用CSS以往的语法),precss(像Sass的函数)

$ cnpm install autoprefixer --save-dev
$ cnpm install cssnext --save-dev
$ cnpm install precss --save-dev

配置gulpfile.js文件

var autoprefixer = require('autoprefixer'); 
var cssnext = require('cssnext'); 
var precss = require('precss');

var processors = [
    autoprefixer,
    cssnext,
    precss
]; 

运行命令,在css文本查看style.css

$ gulp css

误区3-PostCSS会使构建筑工程具更复杂

前面一个的工具已经够多的,为啥还要加上叁个步入,使工具更目眩神摇呢?这样寻思是没有错,但你要看你的品种是还是不是须要。

您恐怕在不晓得的动静下,已经运用了PostCSS。若是您使用过Autoprefixer为CSS增添浏览器前缀,恐怕你早就使用它了。Autoprefixer是一个PostCSS插件,能够在营造筑工程具的职分中采取,如grunt和gulp工具对应的grunt-postcss和gulp-postcss插件。也得以在其它一些创设筑工程具中应用,如Webpack,更Dolly用方法,请查询PostCSS文档。

当在你的花色中,用未有接纳postcss插件的法子,使用了Autoprefixer,小编提议你使用它。那样可以让您,在应用别的PostCSS插件时,更易于,结构也更鲜明。

譬喻,假若你在Gulp营造筑工程具中选用Autoprefixer,你的gulpfile.js里的代码应该像上边那样:

return gulp.src( ['/**/*.css'] )
  // PostCSS tasks to be run on our CSS files
  .pipe( postcss([
    autoprefixer({
      browsers: [
        '> 5%',
        'last 2 versions',
        'ie > 7'
      ] 
    }) // Autoprefixes CSS properties for various browsers
    … // any other PostCSS plugins to be run can be added in here]) )
.pipe( gulp.dest( CSS_DEST_PATH ) );

设若要增进插件,能够像Autoprefixer相似,放到这一个数组里。

假诺您的品种用不上Autoprefixer插件,那么能够到postcss.parts上,看看有未有何可用的插件。

每种门类和团协会供给的插件都以莫衷一是的,能够依靠自个儿的景况打开分选。

把PostCSS集成到您的顺序中,不及增多grunt和gulp插件难。PostCSS是一个单身的构建进度,倘若得以矫正你的CSS工作,那么就不要轻便那几个创设进度。

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

Autoprefixer插件成功的形成了名门对PostCSS的贰个广大观念:PostCSS是用来清理CSS、优化速度和拍卖跨浏览器包容性。直到几眼下,小编读书了PostCSS大批量的插件,作者有了本身的思想。

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

2

PostCSS入门教程

source:http://www.w3cplus.com

  • PostCSS深切学习:你须要通晓怎样
  • PostCSS深刻学习:设置选项
  • PostCSS深切学习:Gulp设置
  • PostCSS深入学习:Grunt配置
  • PostCSS浓重学习: 处理插件
  • PostCSS深入学习: 跨浏览器包容性
  • PostCSS深刻学习: 压缩和优化CSS
  • PostCSS深刻学习: PreCSS的接受
  • PostCSS深刻学习: 定制自身的预微机
  • PostCSS深刻学习: PostCSS和Sass、Stylus或LESS一同行使
  • PostCSS深刻学习: 结合BEM和SUIT方法应用PostCSS
  • PostCSS深入学习: 简写和速写
  • PostCSS入门:Sass顾客入门指南

误区4-PostCSS未有比别的预微处理器有更加的多的效率

本条误区的直接原因是,PostCSS插件模仿了SASS的职能,直接拿PostCSS和SASS,LESS比较。

在过去的十三个月,PostCSS已经加多了多数新的工具。为您提供丰盛的插件可供选拔。

假设您觉得PostCSS独有提供了简易的预处理效果,何况坚宁死不屈运用未来用着的预微型机,作者以为你能够多明白一下。像Stylelint,PostCSS Stats和doiuse,还也许有此外众多插件,如:可感到您提供自动化的CSS报告的插件。你前边用的工具是做不到。

PostCSS还提供了风流倜傥部分优化作用,如SVG和CSS minificationg,还提供了比混入越来越好的消除方案--为样式加多回调函数。

纵然你想试试CSS模块,PostCSS也提供了相应的插件。

更要紧的少数,PostCSS才正巧启航。随着不断发展,会有更加多的插件,用来消除CSS相关的标题。查看有如何用得上的插件,能够在postcss.parts上找生机勃勃找。

一句话来讲,PostCSS提供了广大预微处理机不可能成功的效能。能够花点时间思索,怎么着做可以更便于增加你的工具集。

PostCSS不仅仅是意气风发件业务

PostCSS最鲜明之处在于它不局限于任何风姿罗曼蒂克种等级次序成效,它是全然能够定制的,可铺排的,能够说效果与利益是最为的。

正如WordPress插件。电子商务插件是那个受迎接的,但不曾人感觉WordPress本人作为二个电子商务引擎和WordPress的帮助和益处亦不是仅给电子商务插件服务。

就PostCSS来说,小编更爱好把它当作是德州治。本人看上去比超级少,但那便是它存在的意思。那也证实了“空”的含义正是它干吗会有那般多的潜在的能量。它的本领是后生可畏种Infiniti的精彩纷呈的馅料,足以让您认为愕然。

品味三个蒜茸辣酱的内江治和温馨不爱好的。你一定未有理由不选用好的而接纳恒久单少年老成类型的永州治。相反,继续品尝一下往丹东治中填写本人喜欢的酱料,你可能会发现存的新味道,让其改为您生活中的生龙活虎局地。

使用Sass先编写翻译成CSS,然后经过PostCSS对编写翻译好的 CSS做优化管理。让投机的代码更为健康。当然你也得以从来自个儿依照PostCSS定制生龙活虎款相符你自身的预微处理机。

工具

  • CodePen
  • Prepros

总结

PostCSS是生机勃勃款效用强盛的CSS管理工科具,能够增加前端开拓人士的工效。它会成为更为周详的工具,并能高效地消除广大的CSS样式,预管理和书写难题。

假若您后面已经明白PostCSS,但鉴于一些缘故还未有采取它,那么建议您再详尽询问一下,那个可以大大升高前端工效的工具。

原文:PostCSS Mythbusting: Four PostCSS Myths Busted

初稿链接:

是如何让PostCSS变得新鲜

PostCSS是后生可畏种截然两样的编写制定CSS的措施。前端将其陈诉为”PostCSS是风姿罗曼蒂克把瑞士联邦军刀”,那是一个一心适用的陈诉。

接下去,让我们看看PostCSS有啥样极其之处。

PostCSS不是如何

插件

插件列表:Github | postcss.parts

常用插件:

  • cssnext:CSS以往语法
  • Autoprefixer:自动补全浏览器私有前缀
  • precss:CSS预管理(整合Sass、LESS或Stylus功用,语法基本和Sass的后生可畏致卡塔尔
  • postcss-import:通过@import,整合多少个CSS文件
  • css-mqpacker:将后生可畏律的CSS媒体询问法则统一为二个
  • cssnano:压缩CSS文件
  • postcss-color-rgba-fallback:给rgba颜色创设降级方案(增多备用颜色)
  • postcss-opacity:给opacity提供降级方案(给IE浏览器增加滤镜属性卡塔 尔(英语:State of Qatar)
  • node-pixrem:让IE8支持rem单位
  • postcss-pseudoelements:将伪成分的::转换为:(IE8不支持::)

它的插件生态系统提供不一致的效用

像PostCSS本人同样令人惊异的是,它有广大区别的插件,那也是让PostCSS发光的地方。当您看看PostCSS在GitHub上的可用插件列表,你会开采其颇有有滋有味标效应。

那些插件允许你利用新语法、颜色函数、conic-gradient、自定义属性、自定义采取器、媒体询问的小名以至越来越多。

再有备用插件来制造传统的语法,举例将十八制颜色换成rgba()颜色、给IE8的opacity添加滤镜,给IE8推出伪成分选拔器,飞速将px转换成rem等等。

仍可以扩展插件,饱含丰富变量、mixin、条件、循环、BEM和SUIT类名等等。

选料颜色的保管插件,允许颜色从风度翩翩种格式调换成另生机勃勃种格式,修正颜色的阿尔法值,结合色彩,生成更友善的配色方案等等。

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

眼前插件不断的越多,这里笔者法生机勃勃黄金年代罗列出来,假如感兴趣,可以留意阅读那么些插件列表。

固然表面上它看起来是三个预微型机,其实它不是三个预微机

模块化

生机勃勃边,PostCSS具备很可用的插件,你能够依靠自身所需尽量使用多的筛选或尽恐怕少选取。

黄金时代旦仅想用PostCSS让CSS是更有效率和让浏览器更融洽的话,加载一些优化插件,你就能够闪人了。

尽管仅想用POstCSS作为预微处理器的话,使用部分语言扩充插件就OK。

PostCSS的基本原理是粒子化,模块化。一句话来讲,未有拍卖多个功效的笨重插件。相反,每创造多少个插件,正是一个功力。

举个例子,你能够依照自身和煦喜欢的语法做取舍和创制和睦或自定义自个儿的预微处理器。恐怕,你能够加载PerCSS包,能够自行访谈多少个语言的强大插件。

任凭你是想使用PostCSS什么作用,你都只须要依靠你和煦一定目定安装所需的插件。意思便是,你不必要安装别的依据的插件。

就算表面上它看起来是一个后Computer,其实它亦不是一个后计算机

快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文件。

它不是其余意气风发件业务,那也意味者它潜在的能量Infiniti,你能够依靠本身的须要配置你供给的功能

PostCSS库不会绑定到四个Computer上

纵然过去他俩只怕间接采取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
  • 尽管它能够推动、协理今后的语法,其实它不是前程语法
  • 固然它能够提供清理、优化代码这样的功能,其实它不是理清、优化代码的工具
  • 它不是其余大器晚成件业务,这也意味者它潜能Infiniti,你能够依据自个儿的需求配置你供给的效果与利益

快快编写翻译

PostCSS特别之处

  • 三种化的功用插件,创设了叁个生态的插件系统
  • 依附你须要的性状开展模块化
  • 非常快编写翻译
  • 创办自个儿的插件,且具可访谈性
  • 能够像平常的CSS相通接受它
  • 不依据于于任何预微型机就具备创立三个库的工夫
  • 能够与点不清风靡工具创设无缝安顿

成立和睦的插件,且具可访问性

“PostCSS浓烈学习”种类

本连串中,我们将通过上边包车型客车多如牛毛教程告诉您如何运用PostCSS:

  • PostCSS深切学习: 设置选项
  • PostCSS浓郁学习: Gulp配置
  • PostCSS深切学习: Grunt配置
  • PostCSS浓重学习: 研究插件

也会看看多少个例外应用PostCSS的法子:

  • 跨浏览器
  • 减掉和优化
  • PreCSS预微处理机
  • 概念本人的预微机
  • 结合Stylus、Sass或LESS
  • CSS的BEM或SUI方法
  • 飞速键与缩写
  • PostCSS的语法糖

末尾我们将带你创建筑组织调的二个PostCSS插件。

您大概会小心到,PostCSS使用教程很贫乏。主要的来头是相当不足介绍将来CSS的插件。而见到的cssnext看起来要阅世壹次大变革,十分大大概地会改为所需步骤。因而,大家也会小心它,给我们带给三个崭新的学科,让大家好过渡。

故此让我们最初吧!在接下去的课程中我们将会真正接进去到“快捷入门指南”类别,并向你体现使用PostCSS的最快方式。我们一贯愿意吧…(^_^)

1 赞 1 收藏 评论

图片 6

能够像平常的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:

图片 7

将要上架

那是一本俄语书,听闻普通话版本不慢要上架了。要是喜欢的话,可以关怀一下。

末段提到一点,各部分参考资料以致案例的小同伙们可来小编的前端群:621071874,这里有笔者搜聚到的各部分材质以至案例,望能帮到各位。

本文由星彩网app下载发布于前端技术,转载请注明出处:您须要知道什么,改革PostCSS的4大认知误区

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。