您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496netPostCSS深入学习,PostCSS到底和CSS的区分

新葡亰496netPostCSS深入学习,PostCSS到底和CSS的区分

发布时间:2019-10-06 07:04编辑:新葡亰官网浏览(170)

    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

    市情桃月经有成百上千的前端工具,再来引进新的前端工具,价值大比很小?那至关首要决议于,它是还是不是给开荒职员提供了新的职能,是不是值得花时间和生命力去读书和行使?

    连锁前言

    新葡亰496net 1

    image.png

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

    css预管理器给出了格外实用的应用方案:

    变量:就如别的编制程序语言一样,免于多处改换。

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

    Sass:它的章程是三者中最差的,空头支票全局变量的概念
    Less:它的不二诀要和js比较相似,逐级往上探索变量
    Stylus:它的办法和Less相比平常,不过它和Sass同样更赞成于指令式查找
    嵌套:对于css来讲,有嵌套的写法无疑是巨细无遗的,更疑似父亲和儿子层级之间彰着提到

    三者在那处的拍卖都以同一的,使用「&」表示父成分

    PostCSS入门

    PostCSS在以惊人的速度进步,并且特别受人款待。越多的人最初在打听它,使用它。因为他们发掘到,在项目中央银行使PostCSS让他们发觉到了耳目一新。

    新葡亰496net 2

    2015年总共不到140万的下载量,但从贰零壹陆年3月份到八月份早就超过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设置中设置:

    新葡亰496net 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代码;可以增多现在语法;能够拉长变量和逻辑;能够提供全部的网格系统;能够提供编码的连忙方式……还也许有为数不菲居多。

    新葡亰496net 4

    接纳表达

    1. 大局安装居尔p
    2. 复制客栈文件到项目目录(PostCSS文件夹 内的源委)
    3. 指令终端运营:npm install(Taobao镜像使用该命令:cnpm install
    4. src文件夹 为编辑源文件,css文件夹 为转移代码文件
    5. src文件夹新葡亰496netPostCSS深入学习,PostCSS到底和CSS的区分在哪个地方。 目录下命令终端运营: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发布时,它被定义和撤销合并为叁个“后Computer”。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样式代码。

    autoprefixer 插件

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

    autoprefixer是让您能够偷懒的神器,假若你的类型是PC端的,并且产品大大或然项目老董大大体你宽容IE8~9,是还是不是很头痛。别怕,用了autoprefixer,写平常的正式css就好了,autoprefixer会自动帮您增加浏览器前缀的,哈哈。

    Postcss还应该有为数不少效果,压缩合併它都足以,只要你感兴趣,完全能够使用到品种个中(不提出,当然假令你愿意折腾,请随便)。

    PostCSS不是后计算机

    PostCSS名称中有贰个”post”单词,但它不是一个的确的”后计算机“。后计算机平常被视为在成就的样式表中根据CSS规范管理CSS,让其更低价,常做的一件业务就是给CSS属性增加浏览器私有前缀。可是,PostCSS并不囿于于这种操作。正如上边提到的,它能够像二个预处理器。

    最佳的也便是视PostCSS为Computer。PostCSS创设者Andrey Sitnik在照片墙上那样描述的:

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

    Maxime Thirouin作为PostCSS进献者和插件开拓职员,他在推特上说,PostCSS中的”post”指的是加工,它能够让CSS变得越来越好,以至是超过CSS。

    It’s not post-processing if it happens before hitting the browser. 新葡亰496netPostCSS深入学习,PostCSS到底和CSS的区分在哪个地方。@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。

    做事流程如下图:

     新葡亰496net 5

    自然最后,你是或不是选用使用PostCSS话语权在您。假使您只把它正是预管理器使用,也得以。但想让SASS和LESS那样的预管理工科具,具有上面那样新的风味,它们是做不到的。

    PostCSS不是前景的新语法

    有局地美丽的PostCSS插件允许你写未来的语法,即使那几个CSS语法尚未得到遍布帮衬。然则PostCSS实际不是原始下来就援助未来语法。

    有一对开采人士表示不乐意利用PostCSS正是以此原因之一,因为他们不明白什么样让投机适应去写今后的CSS。可是,写以往的语法只不过是使用PostCSS之一。

    一旦你挑选了,PostCSS完全改造你的开荒进度。

    新葡亰496net 6

    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来说,笔者更爱好把它当作是临汾治。本身看上去非常的少,但那多亏它存在的含义。那也印证了“空”的意义正是它怎会有如此多的潜质。它的技巧是一种Infiniti的四种各种的馅料,足以让您倍感惊喜。

    尝试三个芝麻酱的松原治和调谐反感的。你势必未有理由不选拔好的而采取长久单一类型的张家口治。相反,继续品尝一下往衡水治中填写本人喜欢的酱料,你大概会开采部分新味道,让其产生您生活中的一有个别。

    新葡亰496net,利用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类名等等。

    分选颜色的军事管制插件,允许颜色从一种格式调换成另一种格式,修改颜色的alpha值,结合色彩,生成更融洽的配色方案等等。

    有网格系统,优化工具,缩写以及深入分析报告的插件等等。

    时下插件不断的进一步多,这里作者法一一罗列出来,如果感兴趣,能够稳重阅读那几个插件列表。

    固然表面上它看起来是三个预处理器,其实它不是八个预管理器

    模块化

    一派,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不是哪些

    • 固然表面上它看起来是二个预管理器,其实它不是三个预管理器
    • 就算表面上它看起来是一个后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 收藏 评论

    新葡亰496net 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:

    新葡亰496net 8

    就要上架

    那是一本日文书,听闻普通话版本非常的慢要上架了。假诺喜欢的话,能够关怀一下。

    提及底提到一点,各部分参谋资料以及案例的小同伙们可来自身的前端群:621071874,这里有作者搜集到的各部分材料以及案例,望能帮到各位。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496netPostCSS深入学习,PostCSS到底和CSS的区分

    关键词: