您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496netPostCss使用情势,PostCSS深刻学习

新葡亰496netPostCss使用情势,PostCSS深刻学习

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

    PostCSS深刻学习:设置选项

    2015/10/28 · CSS · POSTCSS

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

    款待开启我们PostCSS长远学习种类之快入门指南。在那么些初级教程中,能够让我们一点也不慢的询问PostCSS和怎么样最管用的行使PostCSS。

    在那篇文章中,大家将先告知你如何设置PostCSS选项,所以您今后开头使用PostCSS只要几分钟。接下来将报告您如何在Codepen和Prepros中设置PostCSS。

    立马让大家看看怎么样开头玩PostCSS。

    PostCSS深远学习:Gulp设置

    2015/10/28 · CSS · POSTCSS

    原著出处: Kezz Bracey   译文出处:大漠   

    在上一篇作品中,大家介绍了何等在CodePen和Prepros中运用PostCSS。就算当中的选项设置能够让您第一时直接触和行使PostCSS,但也可能有大多PostCSS插件限制你无法动用。

    这篇教程将报告你怎么样在Gulp布局中央银行使PostCSS插件,何况能够依靠你协和供给的去安顿所要的插件。那才是当真的进去到PostCSS插件生态系统中。

    特意表明:若果您未有接触或选择命令来配置居尔p的天职,作者提出您在翻阅本课程从前先读书前边笔者写的泛滥成灾教程:《网页设计的吩咐操作》。

    PostCSS-Comn

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

    PostCSS深切学习:你供给了然什么

    2015/10/28 · CSS · POSTCSS

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

    若果你想真正的领会PostCSS的话,你就应当尽早学会PostCSS是怎么样以及怎样运用它。

    在那么些类别中,我们将带您深深精通PostCSS以及如何行使PostCSS方法。如若你还尚无做好观念希图去明白PostCSS能做怎么着,那么能够接着那几个类别步入学习,这一个连串将带您进来到CSS的新世界中间。

    一、PostCss简介

    PostCSS 本人是一个效果相比单纯的工具。它提供了一种形式用 JavaScript 代码来拍卖 CSS(A tool for transforming CSS with JavaScript)。它担任把 CSS 代码剖析成肤浅语法树结构(Abstract Syntax Tree,AST),再交由插件来进展拍卖。插件基于 CSS 代码的 AST 所能实行的操作是五光十色的,比如可以辅助变量和混入(mixin),扩充浏览器相关的扬言前缀,或是把施用今后的 CSS 标准的体制法规转译(transpile)成当下的 CSS 规范协助的格式。从那么些角度来讲,PostCSS 的强硬之处在于其相连发展的插件体系。开辟职员也足以依靠项指标要求,开荒出团结的 PostCSS 插件。

    PostCSS 不会独自行使,而是与已有些构建筑工程具协作使用,如 Gulp、Grunt 和 Webpack 都足以。大家只要求选择必要的 PostCSS 插件实行配备。本文首要介绍在Gulp 中利用 PostCSS 的三种常用插件。

    CodePen中设置PostCSS

    万一你是第一遍接触PostCSS,那么通过CodePen来利用它是最快情势。

    CodePen已事先集成了PostCSS,何况还支持上边所列的PostCSS插件:

    • cssnext
    • postcss-simple-vars
    • postcss-discard-comments
    • postcss-custom-media
    • postcss-media-minmax
    • postcss-conditionals
    • postcss-each
    • postcss-for
    • postcss-nested
    • postcss-transform-shortcut

    那么些插件能够让你援救今后的CSS语法、像Sass同样的函数、注释的删减和代码的缩写等等。

    首先在CodePen在线编辑器上点击”NewPen“创设二个新的页面。然后单击CSS窗口左上角的小齿轮Logo,在弹出的面板中装置。

    新葡亰496net 1

    单击“CSS Preprocessor”下拉选项,你可以选择下拉选项中的“PostCSS”选项。你也得以在”Vendor Prefixing“中选择“Autoprefixer”插件。

    新葡亰496net 2

    下一场你能够点击“Need an add-on”开关,在弹出的面板中选拔你须要的插件。在弹出的面板将会来得@法则插件,复制粘贴这么些@法规对应的PostCSS插件到您的CSS面板中,何况初始接纳。

    新葡亰496net 3

    急需的标准

    由于大家将供给运用Gulp,在初始后边的内容后边,我就算你的微型Computer本地遇到已经怀有了下边列出来的典型化:

    • node.js
    • NPM
    • Git

    倘令你不可能确认你的微型计算机本地系统是还是不是安装了这几个,提出你跟着这篇教程操作三遍,因为这几个条件是大家走入教程前边必备条件。

    当然你也能够先开卷那篇教程,确定保证您对Gulp的基本操作有所精晓。别的,依照教程中的“Gulp安装项目”部分,确定保障您的体系文件夹中有以上面所列文件:

    • 一个gulpfile.js文件
    • 一个package.json文件
    • 基于项目所需安装信赖模块,运行gulp install会有一个node_modules文件夹

    插件功能

    • 协理CSS今后语法
    • 自动补全浏览器私有前缀
    • CSS预管理(整合Sass、LESS或Stylus效率,语法基本和Sass的大同小异)
    • 由此@import,整合八个CSS文件
    • 将一律的CSS媒体询问准则统一为二个
    • 压缩CSS文件
    • 给rgba颜色创造降级方案(增加备用颜色)
    • 给opacity提供降级方案(给IE浏览器增添滤镜属性)
    • 让IE8支持rem单位
    • 将伪成分的::转换为:(IE8不支持::)

    PostCSS入门

    PostCSS在以惊人的进度前进,何况尤其受人迎接。越来越多的人开始在打听它,使用它。因为她们开采到,在项目中利用PostCSS让他们发觉到了改头换面。

    新葡亰496net 4

    二零一五年总共不到140万的下载量,但从二〇一五年15月份到1月份早就超过380万个下载。

    Autoprefixer是PostCSS中最流行的插件,在这之中Google、Shopify、推特(TWTR.US)、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设置中装置:

    新葡亰496net 5

    PostCSS正在巩固,是飞快的加强,而且从不丰盛的理由。

    二、构建gulp PostCss项目

    有关gulp的行使办法,请参照他事他说加以考察gulp教程,营造步骤:
    <pre>
    1.npm init
    2.npm install gulp gulp-postcss --save-dev
    3.npm install autoprefixer --save-dev(增加供给引用的插件)
    </pre>
    在项目文件夹下新建文件gulpfile.js、文件夹/dest & /src,然后配置gulpfile.js:
    <pre>
    var gulp = require('gulp');
    var postcss = require('gulp-postcss');
    // autoprefixer 给一点要求包容性的个性增加浏览器私有前缀
    var autoprefixer = require('autoprefixer');
    // cssnext 允许选取CSS的现在版本
    var cssnext = require('cssnext');
    // precss 检查了@if @else,编写翻译切合需要的代码
    var precss = require('precss');
    // alias 定义自个儿的速写或"别称"
    var alias = require('postcss-alias');
    // postcss-crip 有数百个天性缩写的插件
    var crip = require('postcss-crip');
    // 创造CSS图形 postcss-circle(创立圆) postcss-triangle(创建三角形)
    var circle = require('postcss-circle');
    var triangle = require('postcss-triangle');
    // 使用 top: center; 来达到垂直居中, left: center; 达到水平居中
    var center = require('postcss-center');
    gulp.task('css', function() {
    var processors = [
    autoprefixer,
    cssnext,
    precss,
    alias,
    crip,
    circle,
    triangle,
    linkcolor,
    center
    ];
    return gulp.src('./src/.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
    });
    gulp.task('default', ['css']);
    </pre>
    布置完结后,我们可以来测验下postcss插件到底能推动怎么着的喜怒哀乐。
    1.在/src目录下新建贰个style.css的文本,随便写多个平凡我们要求设置浏览器前缀的体制,举个例子:
    <pre>
    .demo {
    display: flex;
    transform: rotate(90deg);
    }
    </pre>
    2.在支配台输入指令gulp css 或许gulp,查看/dest文件夹,开掘文件夹下有三个style.css的文书,里面纵使经过postcss的autoprefixer插件管理的css代码:
    <pre>
    .demo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    }
    </pre>
    再看看别的postcss插件所起到的意义:
    1.cssnext 插件允许开采人士在当前的等级次序中利用CSS今后版本中恐怕会加盟的新特色。cssnext 担任把这个新特征转译成当下浏览器中能够运用的语法cssnext 是一雨后玉兰片与 CSS 未来版本相关的 PostCSS 插件的组成,越来越多措施能够参照更多cssnext方法。
    • 自定义属性的称谓以“--”起始。当评释了自定义属性之后,能够在体制法规中央银行使“var()”函数来引用,如下:
    <pre>
    .cssnext {
    background: color(red alpha(-10%));
    }
    :root {
    --mainColor: red;
    }
    a {
    color: color(var(--mainColor) alpha(90%));
    }
    编写翻译后的结果:
    .cssnext {
    background: rgba(255, 0, 0, 0.9);
    }
    a {
    color: rgba(255, 0, 0, 0.9);
    }
    </pre>
    • 自定义选择器,CSS 扩张标准(CSS Extensions)中允许创制自定义采取器,举例可以对具有的标题成分(h1 到 h6)创造三个自定义选取器并选用样式。通过“@custom-selector”来定义自定义选拔器。
    <pre>
    @custom-selector :--style h1, h2, h3, h4, h5, h6;
    :--style {
    font-weight: bold;
    }
    编写翻译后的结果:
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-weight: bold;
    }
    </pre>
    • @apply,命名自定义属性中存款和储蓄一组属性,然后以任何样式援引它们,类似于sass的@extend,供给援用并下载:
    <pre>
    在gulpfile.js中引用:
    var apply = require('postcss-apply');
    在决定台输入指令:
    npm install postcss-apply --save-dev
    </pre>
    <pre>
    :root {
    --my-theme: {
    background-color: black;
    color: white;
    border: 1px solid green;
    };
    }
    .my {
    @apply --my-theme;
    }
    编写翻译后的结果:
    .my {
    background-color: black;
    color: white;
    border: 1px solid green;
    }
    </pre>
    • calc()能够选拔数学运算中的简单加( )、减(-)、乘(
    )和除(/)来消除难点,而且还能依照单位如px,em,rem和百分比来转化总结:
    <pre>
    在gulpfile.js中引用:
    var calc = require('postcss-calc');
    在调整台输入指令:
    npm install postcss-calc --save-dev
    </pre>
    <pre>
    :root {
    --font-size-theme: 14px;
    }
    body {
    font-size: var(--font-size-theme);
    }
    div {
    font-size: calc(var(--font-size-theme) x 2);
    height: calc(50px - 1em);
    margin-bottom: calc(var(--font-size-theme) x 1.5);
    }
    编写翻译后的结果:
    body {
    font-size: 14px;
    }
    div {
    font-size: 28px;
    height: calc(50px - 1em);
    margin-bottom: 21px;
    }
    </pre>
    2.选择纯CSS来创建形状,如postcss-circle & postcss-triangle,创立圆形和三角形的语法:
    <pre>
    .circle {
    circle: size color
    }
    .triangle {
    triangle: pointing-<up|down|left|right>;
    width: <length>;
    height: <length>;
    background-color: <color>;
    }
    </pre>
    postcss有广大有趣的插件,有意思味的能够去github上查六柱预测关的plugin,然后尝试使用。

    CodePen用法的例子

    让多们看看哪些在CodePen中采用PostCSS的插件cssnext示例。

    在CSS面板最上端,增添你想要的cssnext插件代码:

    @use cssnext;

    1
    @use cssnext;

    有了那条代码,你将得以行使cssnext官网上陈说的兼具意义特色。比如,我们选择CSS的变量和函数给body设置一个background颜色。

    首先,使用:root定义CSS变量。在CSS面板中增加像上边那样的代码:

    :root { --body_bg_color: black; }

    1
    2
    3
    :root {
      --body_bg_color: black;
    }

    能够像下边包车型客车代码那样调用CSS的变量:

    body { background: var(--body_bg_color); }

    1
    2
    3
    body {
      background: var(--body_bg_color);
    }

    其不常候你应当看见了预览面板上的背景颜色造成了black。你也得以点击CSS面板右上角的”View Compiled“按键见到变化的代码:

    新葡亰496net 6

    接下去,借使大家想让背景颜色不若是全淡红,想变亮一点。大家得以采纳以往的语法修改颜色。

    在地方申明的CSS变量中,修改--body_bg_color变量值,从black变成:

    --body_bg_color: color(black lightness(20%));

    1
    --body_bg_color: color(black lightness(20%));

    那是三个lightness()函数,在black颜色上调20%的亮度,那个时候你能够看来背景颜色从紫蓝形成了深铅白。

    新葡亰496net 7

    可以在CodePen以这种方式使用别的援救的PostCSS插件:

    • 通过@平整引进你想要的采用的PostCSS插件
    • 依靠插件的一声令下在CSS面板中利用(在上面你能找到相应插件使用表明的链接地址)

    上面正是我们眼下在CodePen中选用PostCSS获得的末段效果:

    链接地址

    庞大教程

    实质上那几个剧情在英特网一搜一大把,为了初学者越来越好的翻阅接下的剧情,这里提供一些参照文书档案。

    • 在 Windows、Mac OS X 與 Linux 中安裝 Node.js 網頁應用程式開發環境
    • Node.js 安装配备
    • NPM 套件管理工科具
    • Gulp开拓教程
    • 前端营造筑工程具gulp入门教程

    采取验证

    1. 大局安装居尔p
    2. 复制库房文件到项目目录(PostCSS文件夹 内的从头到尾的经过)
    3. 指令终端运维:npm install(天猫镜像使用该命令:cnpm install
    4. src文件夹 为编辑源文件,css文件夹 为变化代码文件
    5. src文件夹 目录下命令终端运营:gulp css
    6. 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代码;能够增进现在语法;能够加上变量和逻辑;可以提供整机的网格系统;能够提供编码的火速方式……还会有大多众多。

    在Prepros中使用PostCSS

    Prepros中也许未有像CodePen中那么多插件可应用,但它饱含了Autoprefixercssnext插件,能够在Prepros面板中选中,进而激活对应的PostCSS插件。你能够点击此地下载Prepros。

    展开Prepros面板,能够将品种拖到面板中,何况以此面板富含二个CSS文件。然后点击CSS文件,将会在左手展开八个设置面板。在这些面板中您能够看看Prepros帮忙的PostCSS插件,你能够采取你想用的PostCSS插件。比方说你选择Autoprefixercssnext代表您选择了PostCSS这多个插件。

    新葡亰496net 8

    如上海教室所示,你以后得以运用cssnext插件的装有作用以及Autoprefixed插件成效。

    PostCSS在Gulp中的基本配置

    第一在您的类别中创设多个文件夹,二个命名叫src,另二个命名称为destsrc文件夹用来放置未管理的CSS文件,而dest用来放置PostCSS插件管理后的公文。

    接下去须求做的正是在你的品类中设置gulp-postcss插件,安装好未来就足以应用POstCSS处理器。

    在装置在此以前,配置一下package.json文件:

    JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
      "name": "testPostCSS",
      "version": "0.0.1",
      "description": "test PostCSS gulp plugin",
      "keywords": [
        "gulpplugin",
        "PostCSS",
        "css"
      ],
      "author": "damo",
      "license": "MIT",
      "dependencies": {
        "postcss": "^5.0.0",
        "gulp": "~3.8.10"
      },
      "devDependencies": {
        "gulp-postcss": "^6.0.1"
      }
    }

    开辟你的授命终端,何况步向到您的品类根目录下,然后在指令终端输入上面的一声令下:

    JavaScript

    npm install --save-dev gulp-postcss

    1
    npm install --save-dev gulp-postcss

    注:假定上边命令不可能平常安装,建议在下面的通令前增加sudo

    JavaScript

    sudo install --save-dev gulp-postcss

    1
    sudo install --save-dev gulp-postcss

    运营完上边命令之后,假诺没出任何错误,在你的顶点命令中可以见到类似下图的唤醒:

    新葡亰496net 9

    安装达成后你的品种结构看起来就活该像这么:

    新葡亰496net 10

    未来由此编辑器打开gulpfile.js文本,况且成立gulpgulp-postcss变量,如下边代码所示:

    JavaScript

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

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

    我们现在能够安装多少个职务,让PostCSS读取CSS原来的书文件並且管理它。

    丰盛的代码如下:

    JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    gulp.task('css', function () {
      var processors = [
      ];
      return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
    });

    咱俩一同来看一下上在的代码。在率先行,设置了三个职分名称叫css。那个任务将会进行二个函数,同期在这几个函数中创设了贰个名称叫processors的数组。现在那一个数组为空,这里将插入大家想利用的PostCSS插件。

    processors数组前面,大家钦命了亟待管理的指标文件,即src目录中的任何CSS文件。

    这里面使用了三个.pipe()函数,设置postcss()执行PostCSS,并且给postcss()传递processors参数,前边会报告PostCSS要选拔哪个插件。

    接下去的第1个.pipe()函数,内定结过PostCSS管理后的CSS放置在dest文件夹中。

    语法介绍

    • PreCSS语法介绍

    PostCSS不是什么样

    骨子里,使用PostCSS插件你能够做别的你想做的别样工作,但PostCSS相对来讲照旧较新,那也导致了有个别误解,工具实际上是什么。

    重重人(包含自家要幸而内)对PostCSS未有一个整机的回忆,PostCSS实际是怎么着,并据此失去了PostCSS能够提供怎么样。

    故此在大家后续往下阅读在此以前,让大家澄清一些事情,PostCSS不是什么样?

    小结一下

    新葡亰496netPostCss使用情势,PostCSS深刻学习。好呢,快速将方面包车型客车剧情做个计算:

    • 试着在CodePen或Prepros中使用PostCSS
    • CodePen中提供了PostCSS11个插件
    • 在CodePen中的CSS面板中激活PostCSS插件,然后经过引进@平整,就足以利用一定的PostCSS插件
    • Prepros提供了Autoprefixer和cssnext插件
    • 在Prepros中式茶食击项目中任何CSS文件能够设置PostCSS给Prepros提供的PostCSS插件

    测验编写翻译

    src目录中创设一个测量试验文件style.css,并在这么些文件中增加一些CSS的测验代码:

    JavaScript

    .test { background: black; }

    1
    2
    3
    .test {
        background: black;
    }

    现行反革命在指令终端的花色目录下实行上边包车型地铁吩咐:

    JavaScript

    gulp css

    1
    2
    gulp css
     

    新葡亰496net 11

    那是刚刚设置的任务,实行完下面的职分之后,在dest目录中能够找到贰个新的style.css文件。

    当你展开这一个新文件后,你能够见到和你的源文件同样的代码。使用的代码并未其余的转移,那是因为大家还尚无动用另外的PostCSS插件。从原先的教程中,你就能清楚它的插件实际上是会对CSS施行操作的。

    以下内容为自定义进级

    PostCSS不是预处理器

    非常多开垦职员说他俩不愿意放任当前使用的CSS预管理器来支撑PostCSS。与此同期,他们更爱好预管理器而不欣赏PostCSS。而事实上是,PostCSS并不是二个预管理器

    没有错,假若您愿意,你完全能够把它当作为叁个预管理器,但您相对未有像使用预管理器那么些功能。你还是能延续选拔你最心爱的预处理器,并且能构成PostCSS一齐利用。

    下一节:集成任务

    CodePen和Prepros能够由此设置启用PostCSS插件。但是不利的一面是,你不或许决定动用哪个插件。

    当你策画选取PostCSS更加多你想要的插件时,能够经过布署本人挑选的插件。最轻便的秘技是透过gulp或grunt设置需求的PostCSS插件职务,并且让其跑起来。

    在下一节中,你将可学习到怎么着在Glup或Grunt中布署PostCSS插件任何,而且让其跑起来为你所用。感兴趣的同班,款待持续关心接下去的内容。(^_^)。

    1 赞 1 收藏 评论

    新葡亰496net 12

    添加PostCSS插件

    将来大家抬高须求的PostCSS插件:Autoprefixer(处理浏览器私有前缀),cssnext(使用CSS以后的语法),precss(像Sass的函数)。

    运转下边包车型客车一声令下,将插件安装到你的档案的次序:

    JavaScript

    npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev

    1
    2
    3
    4
    npm install autoprefixer --save-dev
    npm install cssnext --save-dev
    npm install precss --save-dev
     

    实在也足以在指令中实行下边包车型大巴代码,也能够落成一样的职能:

    JavaScript

    npm install autoprefixer cssnext precss --save-dev

    1
    npm install autoprefixer cssnext precss --save-dev

    注:安装cssnextprecss时索要一段时间,因为她俩富含了几个插件。

    接下去,在大家的种类中定义变量,将那么些插件加载到大家的品类中。和眼下的章程同样,在gulpfile.js文本中增多下边包车型地铁代码:

    JavaScript

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

    1
    2
    3
    var autoprefixer = require('autoprefixer');
    var cssnext = require('cssnext');
    var precss = require('precss');

    接下来将那多个插件增添到processors数组中,更新后的数组如下:

    JavaScript

    var processors = [ autoprefixer, cssnext, precss ];

    1
    2
    3
    4
    5
    var processors = [
      autoprefixer,
      cssnext,
      precss
    ];

    几个插件已结增多到了processors数组中了,那一年PostCSS会知道将那一个插件功能应用到我们的CSS源文件中。

    我们今后能够给src/style.css新葡亰496net,文本中加多一些测验文件和检验他们的劳作。删除测量试验文件中从前的代码,并增多新的CSS样式代码:

    JavaScript

    /* Testing autoprefixer */ .autoprefixer { display: flex; } /* Testing cssnext */ .cssnext { background: color(red alpha(-10%)); } /* Testing precss */ .precss { <a href='; 3 < 5 { background: green; } @else { background: blue; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /* Testing autoprefixer */
     
    .autoprefixer {
      display: flex;
    }
     
    /* Testing cssnext */
     
    .cssnext {
      background: color(red alpha(-10%));
    }
     
    /* Testing precss */
     
    .precss {
      <a href='http://www.jobbole.com/members/jinyi7016'>@if</a> 3 < 5 {
        background: green;
      }
      @else {
        background: blue;
      }
    }

    在指令终端试行gulp css命令。在dest目录生成的文本会有上边包车型地铁代码:

    JavaScript

    /* Testing autoprefixer */ .autoprefixer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* Testing cssnext */ .cssnext { background: rgba(255, 0, 0, 0.9); } /* Testing precss */ .precss { background: green }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /* Testing autoprefixer */
     
    .autoprefixer {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
     
    /* Testing cssnext */
     
    .cssnext {
      background: rgba(255, 0, 0, 0.9);
    }
     
    /* Testing precss */
     
    .precss {
      background: green
    }

    如上边编写翻译出来的代码你应有见到了Autoprefixer给必要的品质增多了浏览器的私有前缀,第叁个职责cssnext将颜色转换到rgba(),第三盘部PreCSS检查了@if @else,编写翻译切合供给的代码。

    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
    

    PostCSS不是后计算机

    PostCSS名称中有一个”post”单词,但它不是三个着实的”后Computer“。后计算机经常被视为在成就的样式表中依照CSS标准管理CSS,让其更平价,常做的一件工作正是给CSS属性加多浏览器私有前缀。可是,PostCSS并不局限于这种操作。正如上边提到的,它能够像多个预管理器。

    最佳的也正是视PostCSS为计算机。PostCSS创制者Andrey Sitnik在Facebook上这么陈述的:

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

    Maxime Thirouin作为PostCSS进献者和插件开垦职员,他在推文(Tweet)上说,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

    设置插件的精选

    注:一旦您想为一个插件配置选项参数,你能够在插件前面增添一对括号,并在里面传递选项的参数。举例,Autoprefixer供给钦定相应的浏览器列表参数,你能够像这么设置:

    JavaScript

    var processors = [ autoprefixer({browsers: ['last 1 version']}), cssnext, precss ];

    1
    2
    3
    4
    5
    var processors = [
      autoprefixer({browsers: ['last 1 version']}),
      cssnext,
      precss
    ];

    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
    

    PostCSS不是鹏程的新语法

    有点优良的PostCSS插件允许你写以往的语法,纵然那几个CSS语法尚未猎取周围辅助。可是PostCSS实际不是纯天然下来就补助现在语法。

    有局部开辟职员表示不乐意利用PostCSS正是那么些原因之一,因为他们不知底如何让协调适应去写未来的CSS。不过,写以后的语法只可是是利用PostCSS之一。

    设若您挑选了,PostCSS完全改动你的开销进度。

    享受你的门类

    PostCSS最美之处正是能够将插件依照本身的急需做跋扈的组合。这对于确认保障别的的人期望在贰个门类中有一致的PostCSS插件设置时,就建议了八个十分的大的挑战。那得感激npm,大家得以经过她来治本插件信任关系。

    因为大家设置插件到花色中央银行使了--save-dev标注,在装置时会自动将依据文件写入项指标package.json文本中。那代表一旦您想和客人分享你的系列,他们恐怕在命令终端运维npm install命令,就足以活动安装分享的插件。

    有关于更加多关于npm依赖关系管理的新闻,你能够点击这里进展越多的刺探。

    PostCSS入门教程

    source:http://www.w3cplus.com

    • PostCSS深远学习:你要求理解什么样
    • PostCSS深入学习:设置选项
    • PostCSS深远学习:居尔p设置
    • PostCSS深远学习:Grunt配置
    • PostCSS深刻学习: 处理插件
    • PostCSS深刻学习: 跨浏览器包容性
    • PostCSS深切学习: 压缩和优化CSS
    • PostCSS深远学习: PreCSS的施用
    • PostCSS深入学习: 定制本身的预管理器
    • PostCSS长远学习: PostCSS和Sass、Stylus或LESS一同利用
    • PostCSS深切学习: 结合BEM和SUIT方法应用PostCSS
    • PostCSS深刻学习: 简写和速写
    • PostCSS入门:Sass客户入门指南

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

    Autoprefixer插件成功的导致了豪门对PostCSS的三个常见观念:PostCSS是用来清理CSS、优化速度和管理跨浏览器宽容性。直到昨日,笔者上学了PostCSS多量的插件,作者有了上下一心的见识。

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

    来总计一下

    接下去做个简易的下结论:

    • 通过npm成立项目,何况将gulp安装到gulpfile文件
    • 安装gulp-postcss插件
    • 安装你的gulpfile.js文件,将gulpgulp-postcss加载到品种中
    • 始建三个任务,来编写翻译你的CSS
    • 在职责中,设置一个processors数组
    • .pipe()是安装三个postcss()函数,并且将processors传递给它

    你能够依附地方的科目介绍,遵守平等的步子,你可以将PostCSS任何插件安装到花色中。

    • 通过npm install <plugin_name> –save-dev 命令将插件安装到你的项目中
    • 类似var autoprefixer = require("autoprefixer")代码在你的gulpfile.js文件中定义要加载的插件变量名
    • 将变量名增添到你的preprocessors数组中

    若是你感兴趣,能够点击这里将示例全体代码下载下来。

    工具

    • CodePen
    • Prepros

    PostCSS不仅仅是一件业务

    PostCSS最醒目之处在于它不局限于任何一类别型效率,它是一心能够定制的,可配置的,能够说功效是最为的。

    正如WordPress插件。电子商务插件是深受接待的,但不曾人觉着WordPress本人作为贰个电子商务引擎和WordPress的长处亦不是仅给电子商务插件服务。

    就PostCSS来讲,小编更爱好把它看做是安庆治。自己看上去非常的少,但那正是它存在的意义。那也认证了“空”的意思正是它干吗会有那样多的潜在的力量。它的手艺是一种Infiniti的丰富多彩的馅料,足以让您感到奇怪。

    尝试多个芝麻酱的丹东治和本身不爱好的。你一定未有理由不选拔好的而挑选永久单一类型的东营治。相反,继续品尝一下往娄底治中填写本人喜欢的酱料,你可能会发掘有些新味道,让其变为你生活中的一局地。

    下一节:Grunt PostCSS

    在接下去的一节内容中,我们将联合签字谈谈在类型中哪些选拔Grunt来计划PostCSS。

    1 赞 1 收藏 评论

    新葡亰496net 13

    插件

    插件列表: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是一种天壤之别的编辑撰写CSS的措施。前端将其汇报为”PostCSS是一把Switzerland军刀”,那是贰个全然适用的陈诉。

    接下去,让大家看看PostCSS有怎么着非常之处。

    它的插件生态系统提供区别的法力

    像PostCSS本人同样令人惊愕的是,它有广大不等的插件,这也是让PostCSS发光之处。当您看看PostCSS在GitHub上的可用插件列表,你会发觉其全部各式各样的功力。

    这么些插件允许你利用新语法、颜色函数、conic-gradient、自定义属性、自定义选用器、媒体询问的外号以及越来越多。

    还会有备用插件来创造守旧的语法,举例将十六制颜色换来rgba()颜色、给IE8的opacity加多滤镜,给IE8推出伪成分采纳器,急迅将px转换成rem等等。

    仍是能够扩展插件,蕴涵丰盛变量、mixin、条件、循环、BEM和SUIT类名等等。

    分选颜色的管理插件,允许颜色从一种格式调换来另一种格式,修改颜色的阿尔法值,结合色彩,生成更要好的配色方案等等。

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

    最近插件不断的一发多,这里笔者法一一罗列出来,假若感兴趣,能够细心阅读那么些插件列表。

    模块化

    三头,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

    当先53%PostCSS插件不须求选择自定义的语法,其实它就是出色的预管理器。相反,它们得以选拔常规的CSS语法。那也意味着,你能够使用PostCSS就如使用CSS一样。举例说,你要做到多少个前端框架,你完全能够利用旁人项目中的文件,举个例子Normalize.css文件。

    那也象征,你没有须求一定使用一个特有的预管理器,举例说Stylus、Sass或LESS,因为您总是能够选用PostCSS编写翻译后的CSS。举例,你利用Sass编写的Foundation,完全能够运用PostCSS的优化和前景语法的插件生成新的CSS文件。

    PostCSS库不会绑定到三个Computer上

    纵然过去她们可能一向利用Stylus、Sass或LESS来编排二个库,但大家也初阶阅览有人因而PostCSS来成立整个库。

    例如,Cory Simmons随纵然用Stylus和Sass编写了三个网格系统,他的客户群众体育只对应采纳Stylus和Sass的客户。随后他利用PostCSS移植了这一个网格系统,那也代表今后每种人都能够采纳了,包手Stylus、Sass客商,以至是利用LESS或不行使其余预管理器的人。

    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 收藏 评论

    新葡亰496net 14

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496netPostCss使用情势,PostCSS深刻学习

    关键词:

上一篇:PostCss使用方法,PostCSS深入学习

下一篇:没有了