搜索
首页web前端html教程POSTCSS快速入门使用_html/css_WEB-ITnose

| 原文链接: http://aotu.io/notes/2015/10/13/start-postcss/

初识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 是一套利用JS插件实现的用来改变CSS的工具.这些插件能够支持变量和混合语法,转换未来CSS语法,内联图片,还有更多

我们用过 Less、 SASS等工具来对CSS做 预处理操作,按照它们约定的语法来书写并且最终转换成可用的样式,这付出的代价是 必须先熟悉这个工具的书写语法

随着近几年 Grunt、 Gulp、 Webpack等自动化工具的兴起, 组合式应用变得非常的热门,那 PostCSS存在的意义是什么呢?答案是: CSS生态系统

PostCSS拥有非常多的插件,诸如自动为CSS添加浏览器前缀的插件 autoprefixer、当前移动端最常用的 px转 rem插件 px2rem,还有支持尚未成为CSS标准但特定可用的插件 cssnext,还有很多很多。就连著名的 Bootstrap在下一个版本 Bootstrap 5也将使用 PostCSS作为样式的基础。

一句话来概括PostCSS: CSS编译器能够做到的事情,它也可以做到,而且能够做得更好

快速使用PostCSS

上面大致介绍了 PostCSS,也许我们并没有在头脑里形成对它的认知,那下面我们就通过一个简单地实例来看看如何使用 PostCSS。

PostCSS得益于插件,支持Grunt,Gulp,webpack,Broccoli,Brunch还有ENB,这里我们将以 Gulp作为实例来讲。

环境准备

创建并进入我们的实例目录

mkdir postcss-demo && cd postcss-demo

然后快速生成 package.json文件

# --yes 参数能够帮助我们快速生成默认的package.jsonnpm init --yes

将上面创建的 package.json文件的 main参数改为 gulpfile.js,然后安装我们所需的依赖

# gulp跟gulp-postcss是必须的,后面两个插件为了演示用途npm i gulp gulp-postcss autoprefixer autoprefixer-core cssnext --save-dev -d

创建 gulpfile.js

# 这里用命令行进行创建,你也可以手动新建touch gulpfile.js

修改gulpfile.js

将下面代码贴进 gulpfile.js

var gulp = require('gulp');var postcss = require('gulp-postcss');var autoprefixer = require('autoprefixer');var cssnext = require('cssnext');//定义css任务gulp.task('css', function(){  //定义postcss任务流数组  var processors = [    autoprefixer({      browsers:['last 3 version'],      cascade: false,      remove: false    }),    cssnext()  ];  return gulp.src('./src/css/*.css')             .pipe(postcss(processors))             .pipe(gulp.dest('./dist'));});

创建示例样式

在项目根目录下创建src目录,再在src目录下面创建css目录,然后创建style.css文件

# 这里用命令创建,你也可以手动创建mkdir -p src/css && touch style.css

编辑样式如下:

h1{  display:flex;}:root {--fontSize: 1rem;--mainColor: #12345678;--highlightColor: hwb(190, 35%, 20%);}body {color: var(--mainColor);font-size: var(--fontSize);line-height: calc(var(--fontSize) * 1.5);padding: calc((var(--fontSize) / 2) + 1px);}

运行实例

一切准备就绪之后可以在项目根目录下执行刚才我们定义的任务

gulp css

如果不出什么意外的话就会在根目录下面生成一个 dist文件夹,里面有一个样式文件,内容如下:

body{  display:-webkit-flex;  display:-ms-flexbox;  display:-webkit-box;  display:flex;}body {color:#123456;color:rgba(18, 52, 86, 0.47059);font-size:16px;font-size:1rem;line-height:24px;line-height:1.5rem;padding:calc(0.5rem + 1px);}

我们可以看到我们写的样式自动添加了浏览器前缀,并且一些未来CSS语法也被转换了。

了解PostCSS

通过上面的实例我们应该知道 PostCSS的使用方法,此时让我们先回想一下 CSS预处理器的使用历程:

  1. 学习该CSS预处理器的语法特性,诸如:变量定义、嵌套、继承
  2. 在特定后缀名(.less/.scss等)的文件按照上面的语法进行编写
  3. 通过Gulp/Grunt/Webpack等自动化工具或者手动编译成CSS样式

而 PostCSS的使用历程:

  1. 直接按照CSS标准语法来书写CSS样式文件
  2. 通过Gulp/Grunt/Webpack等自动化工具加载PostCSS插件转换输出

通过对比我们类比一个结论: CSS预处理器好比给你一个工具箱,工具箱里面有什么东西该怎么拿已经跟你约定好,你必须按照这个规则来拿;而PostCSS好比给你一个盒子,你可以从旁边选择自己需要的工具放进盒子打包拿走,如果还不够用你可以自己造一个工具

深入PostCSS

PostCSS自身只包括了 CSS分析器, CSS节点树API, source map生成器, CSS节点拼接器,而基于 PostCSS的插件都是使用了 CSS节点树API来实现的。

我们都知道CSS的组成如下:

element {  prop1 : rule1 rule2 ...;  prop2 : rule1 rule2 ...;  prop2 : rule1 rule2 ...;  ...}

也就是一条一条的样式规则组成,每一条样式规则包含一个或多个属性跟值。所以 PostCSS的执行过程大致如下:

  1. Parser

    利用 CSS分析器读取CSS字符内容,得到一个完整的 节点树

  2. Plugin

    对上面拿到的 节点树利用 CSS节点树API进行一系列的转换操作

  3. Plugin

    利用 CSS节点拼接器将上面转换之后的节点树重新组成CSS字符

  4. Stringifier

    在上面转换期间可利用 source map生成器表明转换前后字符的对应关系

PostCSS性能

在PostCSS官方推特上看到,由JavaScript编写的PostCSS比C++编写的libsass还要快3倍。

如果你对上面的性能截图有疑问,可以亲自来 这里测试看看。

开始编写自己的PostCSS插件

PostCSS在自己的 Github上放了一些常用的插件,更多的插件可以在 postcss.parts进行搜索。

但有时候已有的插件不满足我们的需求,这个时候需要编写自己的PostCSS插件,下面我们将一步步创建一个简单的插件,这个插件功能非常简单,如下:

/*   文件位置:src/css/style.css */h1 {  font-family: "\5FAE\8F6F\96C5\9ED1",fontstack('Arial');}

当输入上面的样式时,会生成下面的样式:

/*  文件位置:dist/style.css */h1 {  font-family: "\5FAE\8F6F\96C5\9ED1",tahoma,arial;}

环境准备

我们将以 Gulp作为基础来实现我们的插件,首先创建项目文件夹

mkdir postcss-plugin && cd postcss-plugin

然后快速创建 package.json文件:

npm init --yes

紧接着先安装必备的包

npm i gulp postcss gulp-postcss --save-dev -d

再创建 gulpfile.js并且输入下面内容:

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

创建插件文件夹

我们在执行 npm install安装的包都放置在 node_modules文件夹下面,这里我们创建PostCSS的插件文件夹,注意: PostCSS的插件命名格式为:postcss-插件名字

# 这里采用命令新建文件夹,你也可以手动创建mkdir node_modules/postcss-fontstack

创建插件入口文件

现在我们可以在 postcss-fontstack文件夹创建入口文件 index.js, PostCSS创建插件的方式如下:

var postcss = require('postcss');module.exports = postcss.plugin('插件名字', function 插件名字(选项){  //这里写插件代码})

那我们可以在 index.js里面贴入下面代码:

var postcss = require('postcss');modules.exports = postcss.plugin('fontstack', function fontstack( options ){  return function( css ){    options = options || {};    var fontstack_config = {      'Arial': 'tahoma,arial',      'Times New Roman': 'TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif'    };    function toTitleCase( str ){      return str.replace(/\w\S*/g,function( txt ){          return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();      });    }    // css.walkRules方法用来遍历每一条css规则    css.walkRules( function( rule ){        // walkDecls方法用来解析属性跟值        rule.walkDecls( function( decl, i ){            var value = decl.value;            if( value.indexOf( 'fontstack(' ) !== -1 ){                var fontstack_requested = value.match(/\(([^)]+)\)/)[1].replace(/["']/g,"");                fontstack_requested = toTitleCase( fontstack_requested );                var fontstack = fontstack_config[ fontstack_requested ];                var firstFont = value.substr( 0, value.indexOf('fontstack(') );                var newValue = firstFont + fontstack;                decl.value = newValue;            }        });    });  }});

在 gulpfile.js引入上面的插件,代码如下:

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

运行实例

在项目根目录下运行实例,最终实现我们的效果

gulp css

再谈PostCSS

基于 PostCSS能够做到很多 CSS预处理器做不到的事情,未来发展前景还是挺不错的,而且最新的 Atom编辑器也可以下载插件来支持 PostCSS这种语法。

但这就意味着 CSS预处理器过时了么?不会。 PostCSS的出现并不是为了替换掉之前的技术,只是提供多一种思路让我们去考虑,就比如Sass编译后再加 autoprefixer自动补齐浏览器前缀这种做法当前还是比较流行的。

再回到文章最开始说的, PostCSS其实是在打造一个改变CSS开发方式的生态系统。也许暂时我们还是保持传统的开发方式,但未来对于 PostCSS我还是保持关注,它是值得期待的。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML文档中的根标签是什么?HTML文档中的根标签是什么?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,确保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML标签和元素是同一件事吗?HTML标签和元素是同一件事吗?Apr 28, 2025 pm 05:44 PM

文章解释说,HTML标签是用于定义元素的语法标记,而元素是完整的单位,包括标签和内容。他们一起工作以构建网页。查拉克计数:159

< head>的意义是什么。 &<身体>在html中标记?< head>的意义是什么。 &<身体>在html中标记?Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head> &<身体> HTML中的标签,它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

< strong>,lt; b>有什么区别标签和lt; em>,< i>标签?< strong>,lt; b>有什么区别标签和lt; em>,< i>标签?Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集?请说明如何指示HTML中文档使用的字符集?Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符,重点介绍了UTF-8。主要问题:确保正确显示文本,防止乱七八糟的字符,并增强SEO和可访问性。

HTML中的各种格式标签是什么?HTML中的各种格式标签是什么?Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签,强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别?HTML元素的' ID”属性与'类”属性之间有什么区别?Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异,重点是它们的独特性,目的,CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能,并为

HTML中的'类”属性是什么?HTML中的'类”属性是什么?Apr 28, 2025 pm 05:37 PM

本文解释了HTML“类”属性在分组样式和JavaScript操纵元素中的作用,将其与唯一的“ ID”属性进行对比。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具