巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

具体解读CSS的预编译器PostCSS

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-21 17:24:58 阅读数: 133

提到css预编译器(css preprocessor),你能够想到Sass、Less和Stylus。而本文要先容的PostCSS,恰是一个如许的东西:css预编译器能够做到的事,它一样能够做到。

“你说的我都懂,那为甚么要用它?”


套装与单件

若是Sass等预编译器是新界说了一种模板说话,而后将其转化为css的话,PostCSS则是更纯洁地对css本身做转换。

回忆一下你是若何进修利用css预编译器的:领会到有如许一种能够转化为css的说话,它有良多特征,变量、嵌套、担当等等,每种特征都经由进程必然语法完成。大要就像是递给你一个已封装好的东西箱(量产型?),你能够在外面找有效的东西。

那PostCSS是若何呢?PostCSS就像只递给你一个盒子,但告知你你能够从中间的摆设柜取走本身想要的东西放进盒子打包带走。若是你感触感染摆设柜里的不够好,PostCSS还能够帮你打造你本身的东西。以是,利用PostCSS,你能够仅取所需。

这便是PostCSS的模块化(modular)气概。它作为一个css转换东西,本身很小,其一切的转换功效都是插件,是以能够特征化设置装备摆设。


PostCSS的扼要道理

PostCSS本身只包罗css阐发器,css节点树API,source map天生器和css节点树拼接器。

css的构成单元是一条一条的款式法则(rule),每条款式法则又包罗一个或多个属性&值的界说。以是,PostCSS的履行进程是,先css阐发器读取css字符内容,获得一个完整的节点树,接上去,对该节点树停止一系列转换操纵(基于节点树API的插件),最初,由css节点树拼接器将转换后的节点树从头构成css字符。时代可天生source map标明转换前后的字符对应干系:

比拟成心思的是,PostCSS的插件实在都是JavaScript函数,它们利用PostCSS的节点树API,对css节点树停止差别的转换。

插件预览

一切插件都能够在PostCSS的主页中查问到,这里只拔取一小局部表示一下。
Autoprefixer

PostCSS最着名的插件是Autoprefixer。如名所示,能够主动为你增添阅读器公有前缀。它的增添值会参考Can I Use及你设定的阅读器撑持规模,是以相称靠得住。上面是一个示例(以我设定的阅读器撑持规模):

CSS Code复制内容到剪贴板
  1. .container{   
  2.     display: flex;   
  3. }  

编译后:

CSS Code复制内容到剪贴板
  1. .container{   
  2.     display: -webkit-box;   
  3.     display: -webkit-flex;   
  4.     display: -ms-flexbox;   
  5.     display: flex;   
  6. }  

postcss-nested&postcss-mixins

在刚起头利用PostCSS时,我就想到要用PostCSS完成我在Sass中最经常利用的特征。以是,我找到了postcss-nested和postcss-mixins。将它们连系起来后,就能够做到如许:

CSS Code复制内容到剪贴板
  1. @define-mixin clearfix{   
  2.     &:after{   
  3.         display: table;   
  4.         clearboth;   
  5.         content" ";   
  6.     }   
  7. }   
  8.   
  9. .column-container{   
  10.     color#333;   
  11.     @mixin clearfix;   
  12. }  

编译后:

CSS Code复制内容到剪贴板
  1. .column-container{   
  2.     color#333;   
  3. }   
  4.   
  5. .column-container:after{   
  6.     display: table;   
  7.     clearboth;   
  8.     content" ";   
  9. }  

到这里,你是不是已有了“预编译器能够做到的它也能够做到”的感触感染呢?
若何利用PostCSS

我小我保举连系Gulp利用,本文在此只先容gulp-postcss的用法。

gulp-postcss及插件都是npm,起首,利用npm install将它们别离装置到名目目次中(会位于node_modules)。而后,编辑glupfile.js,将PostCSS注册为Gulp的一个使命。以下是一个连系利用了Autoprefixer、postcss-simple-vars、postcss-mixins、postcss-nested4个插件,且天生source map文件的例子:

CSS Code复制内容到剪贴板
  1. var gulp = require("gulp");   
  2. var postcss = require("gulp-postcss");   
  3. var autoprefixer = require("autoprefixer-core");   
  4. var postcssSimpleVars = require("postcss-simple-vars");   
  5. var postcssMixins = require("postcss-mixins");   
  6. var postcssNested = require("postcss-nested");   
  7. var sourcemaps = require("gulp-sourcemaps");   
  8.   
  9. // Css process.   
  10. gulp.task("postcss", function(){   
  11.     var processors = [   
  12.         postcssMixins,   
  13.         postcssSimpleVars,   
  14.         postcssNested,   
  15.         autoprefixer({   
  16.             browsers: ["Android 4.1""iOS 7.1""Chrome > 31""ff > 31""ie >= 10"]   
  17.         })];   
  18.   
  19.     return gulp.src(["./stylesheets/src/*.css"])   
  20.         .pipe(sourcemaps.init())   
  21.         .pipe(postcss(processors))   
  22.         .pipe(sourcemaps.write("."))   
  23.         .pipe(gulp.dest("./stylesheets/dest"));   
  24. });  

在上面这段代码中,processors是一个数组,界说了用到的PostCSS插件。PostCSS会按照界说挨次顺次履行插件,是以,在连系多个插件利用时,请注重它们的地位。
自界说转换

另外,你能够很轻易地建立你本身的转换(还记得后面说过PostCSS的插件都是JavaScript函数吧?)。比方,上面是一个自界说的转换体例,它将css代码中的带有rem单元的值,变动为px的值。

CSS Code复制内容到剪贴板
  1. var custom = function(css, opts){   
  2.     css.eachDecl(function(decl){   
  3.         decl.value = decl.value.replace(/d+rem/, function(str){   
  4.             return 16 * parseFloat(str) + "px";   
  5.         });   
  6.     });   
  7. };  

而后,你将这个体例间接增添到processors中(就像postcssMixins那些那样)就能够利用。若是本来有值是3rem,将变成48px。

以上只是一个简略的转换,若是要正式做一个插件,请参考PostCSS插件指南。
机能

PostCSS传播鼓吹,由JavaScript编写的PostCSS比C++编写的libsass(Sass本来是Ruby编写的,但厥后出了C++的引擎,也便是libsass,它更快)还要快3倍。这里的具体数字我感触感染不必多关怀,能够感触感染到“PostCSS的运转速率很快”就充足了。

现实运转起来大要如许:

做到更多

基于PostCSS,能够做到良多现有的css预编译器做不到的事。比方,插件系列cssnext能够让你利用CSS4+的语法(增添了变量等良多特征),它会帮你转化为今朝可用的CSS3。
一点题目

PostCSS有一个题目,那便是它是零星的,以是我没法找到一个编辑器能准确地剖析并高亮筹办利用PostCSS的css代码。比方在WebStorm中我把它当作通俗的css文件,成果就会收到良多白色的毛病提醒。
以是,css预编译器过期了吗?

固然不会。就像其余风行的框架和东西那样,css预编译器是已考证过的可用东西,咱们完整能够按照须要选用。

Sass等css预编译器的特色是成熟靠得住。一方面,它们已是风行的模板说话,有完美的文档和周边撑持,绝对不变,新插手团队的人也能比拟轻易地懂得。另外一方面,集成的气概有它的便利的地方,就像你能够会懒得去组装一个模子,但能找到专业的人替你完成。

PostCSS的特色则是模块化。从久远来看,PostCSS能够做到更多范例的css转换。而可定制的气概很是合适寻求特征的人(更疾速,并且能够本身做出很风趣的插件)。

另外,css预编译器和PostCSS能够协同利用。有一个风行的用法便是Sass编译后再接PostCSS的Autoprefixer(究竟结果这是PostCSS的招牌插件)。
结语

PostCSS的气概能够说是在打造一个转变css开辟体例的生态体系。以是若是说到将来,仍是挺等候的。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。比来几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

27
04月
PHP读取mssql json数据中文乱码的

PHP及网页利用UTF-8编码,数据库是sql server2008,利用默许编码(936,即GBK编码)当读取数据库数据时,利用php自带... >>概况

11
05月
巅云建站网之专业网站设想公司/专业网站扶植公

此刻良多教导机构经由进程收集培训来赚取财帛,比来良多培训机构都在网上打起了告白专业网站扶植为一些培训机构带来了良多的便利,他们经由进程网上宣扬,而后... >>概况

26
04月
php的laravel框架疾速集成微信登录的

本文面向的是php说话laravel框架的用户,先容的是基于该框架完成的一个简略单纯集成微信登录的体例。利用体例以下:1. 装置php_weix... >>概况

05
04月
北京网站扶植网页留白的主要性

空缺在网页设想中很是遍及,北京网站扶植初期的网页设想,包罗用GIF,表格计划文本等添补空间,跟着21世纪初,增添了CSS撑持,分手内容和设想... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站