改过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万的下载量,但从二零一四年112月份到五月份早已超越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更健康。能够用一张图来差不离的叙说:

插件作用

  • 支撑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插件垄断(monopoly卡塔尔国CSS,也正是说它能够适用于别的CSS。只要你能体悟的,你都足以编写制定三个PostCSS插件,让它来转成CSS。

PostCSS插件能够像预微处理机,它们能够优化和autoprefix代码;能够增多今后语法;能够拉长变量和逻辑;能够提供完整的网格系统;能够提供编码的火速格局……还应该有好多浩大。

图片 3

选择表达

  1. 全局安装Gulp
  2. 复制货仓文件到品种目录(PostCSS文件夹 内的内容卡塔尔国
  3. 一声令下终端运转:npm install(天猫镜像使用该命令:cnpm install
  4. src文件夹 为编辑源文件,css文件夹 为转移代码文件
  5. src文件夹 目录下命令终端运营:gulp css
  6. css文件夹 内查看编写翻译后结果

让大家先解决风姿潇洒部分PostCSS不计其数的认知误区,那样能够见到它是怎样加强你的工效,更正你的css编码专门的工作的。

PostCSS不是怎么

事实上,使用PostCSS插件你可以做任何你想做的其余事情,但PostCSS绝对来讲依旧较新,那也促成了豆蔻梢头部分误会,工具实际上是哪些。

无数人(包括作者自个儿在内卡塔 尔(英语:State of Qatar)对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是一个后计算机,也是风流倜傥种误导的。正确的说应该称它为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”单词,但它不是七个实在的”后电脑“。后计算机经常被视为在做到的样式表中依照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进献者和插件开采职员,他在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-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配置与命令

天猫商城镜像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,更加多选拔方式,请查询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比较。

在过去的11个月,PostCSS已经增添了超多新的工具。为你提供丰盛的插件可供采取。

假若你感到PostCSS独有提供了简便的预管理效果,况且坚持不渝使用现在用着的预微电脑,小编认为您能够多理解一下。像Stylelint,PostCSS Stats和doiuse,还应该有其余众多插件,如:可以为您提供自动化的CSS报告的插件。你后边用的工具是做不到。

PostCSS还提供了部分优化职能,如SVG和CSS minificationg,还提供了比混入更加好的消除方案--为样式加多回调函数。

比如您想尝试CSS模块,PostCSS也提供了对应的插件。

更器重的一点,PostCSS才刚刚运行。随着不断提高,会有越多的插件,用来减轻CSS相关的难点。查看有何用得上的插件,能够在postcss.parts上找风姿罗曼蒂克找。

总体上看,PostCSS提供了无数预微处理机无法做到的效应。能够花点时间思考,怎么样做能够更易于扩张你的工具集。

PostCSS不止是黄金时代件事情

PostCSS最通晓的地方在于它不囿于于其余大器晚成类别型功用,它是一丝一毫能够定制的,可配置的,可以说效果与利益是极端的。

正如WordPress插件。电子商务插件是非常受迎接的,但并未有人觉着WordPress本人作为三个电子商务引擎和WordPress的长处亦非仅给电子商务插件服务。

就PostCSS来讲,笔者更爱好把它作为是平顶山治。本身看上去相当少,但那就是它存在的意思。那也申明了“空”的意思就是它怎么会有如此多的潜能。它的本领是豆蔻年华种无限的巨细无遗的馅料,足以让您倍感惊慌。

品味二个黄豆酱的黄石治和友好反感的。你断定未有理由不选拔好的而筛选恒久单意气风发类型的周口治。相反,继续尝试一下往阳江治中填写本身喜好的酱料,你只怕会发觉部分新味道,让其产生您生活中的生龙活虎有的。

运用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浏览器增多滤镜属性卡塔尔
  • 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,其实它亦非八个后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库不会绑定到三个微电脑上

即便如此过去他们大概直接使用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同样。举例说,你要完毕几个前端框架,你一点一滴能够应用别人项目中的文件,举个例子诺玛lize.css文件。

PostCSS库不会绑定到五个Computer上

虽说过去他俩或许直接利用Stylus、Sass或LESS来编排一个库,但大家也开始观察有人通过PostCSS来创设整个库。

别的有一本书极其介绍PostCSS:

图片 7

将要上架

那是一本英语书,据说普通话版本异常的快要上架了。若是喜欢的话,能够关注一下。

最终提到一点,各部分参考资料以至案例的友人们可来本人的前端群:621071874,这里有小编搜罗到的各部分质感以至案例,望能帮到各位。

本文由pc28.am发布于前端技术,转载请注明出处:改过PostCSS的4大认知误区,到底有怎么着事物值得

上一篇:跟随我在oracle学习php,HTML中form表单的用法 下一篇:没有了
猜你喜欢
热门排行
精彩图文