澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

到底有哪些事物值得大家去追究,你要求知道怎

2019-10-30 作者:澳门新萄京赌场网址   |   浏览(200)

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

市情2月经有好多的前端工具,再来引进新的前端工具,价值大超级小?那关键决计于,它是否给开荒职员提供了新的法力,是还是不是值得花时间和生机去学学和采取?

连带前言

澳门新萄京官方网站 1

image.png

当前,在工程化开辟中,使用最多的应有正是Less、Sass和Stylus。首先,照旧介绍一下它们啊。它们有个联合的名字——css预管理器。何为CSS预管理器?

css预管理器给出了老大实用的应用方案:

变量:就好像别的编制程序语言同样,免于多处退换。

Sass:使用「$」对变量进行宣示,变量名和变量值使用冒号进行分割
Less:使用「@」对变量进行宣示

Sass:它的不二等秘书技是三者中最差的,不真实全局变量的概念
Less:它的办法和js比较相通,逐级往上查究变量
Stylus:它的议程和Less比较一般,不过它和Sass相符更赞成于指令式查找
嵌套:对于css来讲,有嵌套的写法无疑是完善的,更疑似老爹和儿子层级之间明显关系

三者在这里处的拍卖都以千篇风华正茂律的,使用「&」表示父成分

PostCSS入门

PostCSS在以惊人的快慢发展,何况越来越受人迎接。越多的人开端在摸底它,使用它。因为她俩发觉到,在类型中运用PostCSS让他们开掘到了日前风华正茂亮。

澳门新萄京官方网站 2

2015年总共不到140万的下载量,但从二〇一四年七月份到7月份早已超越380万个下载。

Autoprefixer是PostCSS中最盛行的插件,个中Google、Shopify、推特、Bootstrap和Codepen都在接纳这几个插件。Wordpress也运用Autoprefixer插件,并且还动用RTLCSS插件。Alibaba行使了多少个PostCSS插件,以至也到庭PostCSS的费用。

除此之外,Mark Otto也聊起就要Bootstrap v第55中学引进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设置中装置:

澳门新萄京官方网站 3

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是三个使用JS插件来对CSS举办调换的工具,这几个插件非常常有力,强盛到神通广大。此中,Autoprefixer正是不知纪极PostCSS插件中最风靡的二个。

直到最近(前年十一月)PostCSS已经有超过200个插件,你可以插件列表招来有未有您所供给的插件。假使您想自个儿写个插件,据书上说那是二个不容争辩的主见,並且特别轻松(前提精晓node.js,可是自个儿尚未学会呢),你能够试着搞点事。

一句话来讲

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代码;能够加多以往语法;可以增进变量和逻辑;能够提供全部的网格系统;能够提供编码的火速情势……还会有非常多广大。

澳门新萄京官方网站 4

动用表达

  1. 大局安装居尔p
  2. 复制仓库文件到品种目录(PostCSS文件夹 内的剧情)
  3. 指令终端运维:npm install(天猫镜像使用该命令:cnpm install
  4. src文件夹 为编辑源文件,css文件夹 为转移代码文件
  5. src文件夹 目录下命令终端运转:gulp css
  6. css文件夹 内查看编写翻译后结果

让大家先驱除部分PostCSS常见的认知误区,那样能够观望它是如何提升你的工效,改过您的css编码职业的。

干什么选择 Postcss

现近期种种插件和工具多的多级,举例gulp、grunt、webpack,less、scss等也皆有对应其工具的附和插件,还只怕有合併、压缩、浏览器自动刷新等实用插件,那Postcss存在的意思是如何吗?

模块化?!假设你的项目用的webpack可能是gulp,那么相应的要安装一群管理各个文件的插件。Postcss能够说正是将你项目中保有拍卖css的插件进行了二个贰回封装,让你依据Postcss这一个平台来成功,用Postcss它独有的意气风发套系统来管理项目中的css文件。也便是说借使你的花色中想接收Postcss,想感受Postcss的异样魔力,那么less、scss、clean-css等管理css的插件全部替换来Postcss其特别的插件就行了。

它还会有生机勃勃部分特点,比方创建了二个插件成效极强的生态系统,具有模块化须要怎样用哪些(precss就是多个集成了相似SASS非常多形式的包),相比较其余的CSS预管理器它的优势主要反映在偏下多少个方面:

  1. 负有超级高的管理品质(3倍以上的管理速度)
  2. 你不仅能够写不奇怪的CSS,也得以整合LESS大概SASS一同编写
  3. 对Source Map协助越来越好
  4. 她的插件真的太多太强盛太方便了

PostCSS不是何许

事实上,使用PostCSS插件你能够做任何你想做的任何工作,但PostCSS相对来讲依然较新,那也导致了部分误会,工具实际上是什么。

重重人(包涵笔者本人在内)对PostCSS未有二个平安无事的回想,PostCSS实际是怎么样,并由此失去了PostCSS能够提供什么样。

到底有哪些事物值得大家去追究,你要求知道怎么。就此在大家三番四回往下阅读在此以前,让我们澄清一些业务,PostCSS不是如何?

1

语法介绍

  • PreCSS语法介绍

唤醒:假设您想询问PostCSS是什么样及如何设置使用它,请看《PostCSS简介》,然后再回到看这篇小说。

PostCSS安装及使用

PostCSS平时是组成自动化学工业具使用,借使要独自行使可以安装PostCSS CLI

因为自个儿用的是webpack,这里介绍一下webpack的行使

npm i  postcss-loader autoprefixer --save-dev

webpack.config.js 文件

    module: {
        rules: [ 
            {
                test: /.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            },
        ]
    },

postcss.config.js 配置文件

module.exports = {
    plugins: [
        require('autoprefixer')   //最常用的postcss插件,自动补全css浏览器前缀
    ]
}

PostCSS不是预管理器

洋洋开辟职员说她们不甘于废弃当前选拔的CSS预管理器来辅助PostCSS。与此同一时候,他们更赏识预管理器而不爱好PostCSS。而实际是,PostCSS并非一个预管理器

准确,假如您愿意,你完全能够把它当做为一个预管理器,但您相对未有像使用预管理器那四个效果。你照旧足以承袭接纳你最心爱的预管理器,何况能整合PostCSS一齐行使。

上海图书馆也报告大家,在此个进度中有众多插件。这几个插件便是PostCSS的插件,而且那一个插件都以使用JavaScript写的。意在言外,你能够应用JavaScript基于PostCSS宗旨的Core上编写制定任何你想要的风华正茂款效果的插件。也因为这么些原因,PostCSS的插件生态圈极其的苍劲,最遍布的正是Autoprefixer、cssnext之类的。当然还应该有任何的,那也是PostCSS能在社区火速发展状大的原由之风度翩翩。小编要好比超多时候常把PostCSS的插件生态作为是NPM的生态。当时你思虑就清楚了。

以下内容为自定义进级

误区1-把PostCSS看成是前管理器或后计算机

先从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样式代码。

autoprefixer 插件

那正是说好,知道了Postcss是个如何鬼,来认识一下最盛名(最实用)的插件autoprefixer

autoprefixer是令你能够偷懒的神器,假若您的连串是PC端的,而且产品大大大概项目老板大大体你包容IE8~9,是还是不是很咳嗽。别怕,用了autoprefixer,写不荒谬的正规css就好了,autoprefixer会自动帮您增多浏览器前缀的,哈哈。

Postcss还应该有比非常多效应,压缩合併它都得以,只要你感兴趣,完全可以采用到项目个中(不建议,当然如若您愿意折腾,请随便)。

PostCSS不是后计算机

PostCSS名称中有一个”post”单词,但它不是二个着实的”后电脑“。后计算机平日被视为在做到的样式表中根据CSS规范管理CSS,让其更管用,常做的生龙活虎件专门的学业正是给CSS属性增添浏览器私有前缀。但是,PostCSS并不局限于这种操作。正如上边提到的,它能够像贰个预管理器。

最佳的也正是视PostCSS为Computer。PostCSS制造者安德雷y Sitnik在推特上这么描述的:

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

马克西姆e Thirouin作为PostCSS进献者和插件开采职员,他在脸书上说,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。

干活流程如下图:

 澳门新萄京官方网站 5

理之当然最后,你是或不是接受使用PostCSS话语权在您。要是您只把它当成预管理器使用,也得以。但想让SASS和LESS那样的预管理工科具,具备上面那样新的特征,它们是做不到的。

PostCSS不是前程的新语法

有黄金时代对了不起的PostCSS插件允许你写未来的语法,尽管这一个CSS语法还没获得布满扶植。然则PostCSS实际不是自发下来就扶植今后语法。

有生龙活虎对开拓职员表示不愿意利用PostCSS正是其后生可畏缘故之风流罗曼蒂克,因为她们不知晓怎么让投机适应去写以后的CSS。然则,写以往的语法只不过是选取PostCSS之一。

风姿罗曼蒂克旦您选取了,PostCSS完全改造你的开销进度。

澳门新萄京官方网站 6

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,更加多应用办法,请查询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浏览器加多滤镜属性)
  • 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库不会绑定到二个管理器上

固然过去她俩只怕一向使用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不是何许

  • 纵然表面上它看起来是一个预管理器,其实它不是二个预管理器
  • 固然表面上它看起来是一个后计算机,其实它也不是三个后计算机
  • 纵然它能够推动、协助今后的语法,其实它不是鹏程语法
  • 就算它能够提供清理、优化代码这样的成效,其实它不是理清、优化代码的工具
  • 它不是别的生机勃勃件业务,这也意味者它潜在的能量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 收藏 评论

澳门新萄京官方网站 7

能够像日常的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库不会绑定到一个管理器上

固然过去她俩大概平素使用Stylus、Sass或LESS来编排三个库,但我们也起始观望有人经过PostCSS来创建整个库。

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

澳门新萄京官方网站 8

将要上架

这是一本韩文书,据他们说汉语版本相当的慢要上架了。假使喜欢的话,能够关注一下。

终极提到一点,各部分参考资料以致案例的同伴们可来自身的前端群:621071874,这里有作者采摘到的各部分材料以至案例,望能帮到各位。

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:到底有哪些事物值得大家去追究,你要求知道怎

关键词: