来学习一下怎么使用postcss吧

张率功发布于2019-08-29 11:11 / 2419人阅读

摘要：如何使用和上面的一样，加入到即可，如下此处省略行此处省略行此处省略行为了验证插件确实生效了，修改一下文件，如下执行再次重新打包，结果如下这里就介绍这两个插件来抛砖引玉一下其实大部分都会使用已有的一些插件，而很少自己去造轮子。

网上关于postcss是什么的介绍真的是太多了。。。
简单粗暴的说，postcss就是一款类似babel的样式转换器!
多说无益，下面就用一个demo来演示一下postcss的用法。

初始化目录

cd ~/workspace/postcss #进入你自己的工具目录
mkdir postcss
cd postcss
mkidr css
npm init #初始化package.json，一路回车即可

编写测试的css文件

进入到css目录，新建一个index.css文件，键入如下内容：

button {
    border-radius: 4px;
    transition: all 0.8s;
    color: $red;
    width: 100px;
}

安装相关npm包

npm install gulp gulp-postcss --save #安装需要的包，这里使用gulp来构建、打包

编写gulpfile.js

postcss文件夹根目录新建一个gulpfile.js文件，键入如下内容：

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

gulp.task("css", function() {
    //postcss处理器列表，暂时为空
    var processors = [];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

执行gulp css，测试一下打包是否正常！

查看生成的build/index.css文件，和原始文件一样。
因为目前processors数组还没有加入任何插件！

增加autoprefixer插件

修改gulpfile.js，完成后如下：

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

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

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

重新执行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: $red;
    width: 100px;
}

增加resolveVar插件

修改gulpfile.js，完成后如下：

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

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

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

function resoleVar(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "color" && decl.value.indexOf("$red") > -1) {
            decl.value = decl.value.replace("$red", "#f00");
        }
        return decl;
    });
}

重新执行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 100px;
}

增加px2rem插件

修改gulpfile.js，完成后如下：

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

gulp.task("css", function() {
    var processors = [
        autoprefixer,
        resoleVar,
        px2rem
    ];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

function resoleVar(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "color" && decl.value.indexOf("$red") > -1) {
            decl.value = decl.value.replace("$red", "#f00");
        }
        return decl;
    });
}

function px2rem(css) {
    css.walkDecls(function(decl) {
        if(/d+px/.test(decl.value)) {
            decl.value = decl.value.replace(/d+px/, function(dest) {
                return parseInt(dest) / 20 + "rem";
            })
        }
        return decl;
    });
}

重新执行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 0.2rem;
    -o-border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 5rem;
}

经过了上面这三个简单的processor之后，相信大家对postcss的认识会更直白一点了吧。。。

postcss插件 autoprefixer

npm install autoprefixer --save

和之前我们自己实现autoprefixer的类似，只不过这个插件做的更好更全一点。

precss

npm install precss --save

press语法和Sass极其相似，你可以毫不费力的使用它。

如何使用

和上面的一样，加入到processors即可，如下：

/**
 * 此处省略N行
 */
var autoprefixer = require("autoprefixer");
var precss = require("precss");
/**
 * 此处省略N行
 */
    var processors = [
        autoprefixer({browsers: ["last 10 version"], cascade: false, remove: false}),
        resoleVar,
        px2rem,
        precss
    ];
/**
 * 此处省略N行
 */

为了验证插件确实生效了，修改一下css文件，如下：

button {
    border-radius: 4px;
    transition: all 0.8s;
    color: $red;
    width: 100px;
    box-sizing: border-box;
}

.menu {
    a {
        text-decoration: none;
    }
}

执行gulp css再次重新打包，结果如下：

button {
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu a {
    text-decoration: none;
}

这里就介绍这两个插件来抛砖引玉一下！
其实大部分都会使用postcss已有的一些插件，而很少自己去造轮子。
当然，如果你有这样的特殊需求或者想学习一下，希望上面那三个例子可以帮到你，大家加油！

GPU云服务器云服务器机器学习学习吧企业使用云vps能带来哪些好处深度学习吧机器学习吧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111481.html

PostCSS 是个什么鬼东西？

摘要：参考的文章最权威的初认识一个不错的东西理解等插件解析技术大漠的系列文章，应用型很强，推荐一个年龄差不多的开发者的解释一篇稍微理论化解释的文章一个开发模式简单的优劣比较大家也可以直接阅读我的博客前言最近大漠前辈在群里发关于PostCSS的系列文章，但是耗子姐姐又说看了有点云里雾里的感觉，所以这篇文章将按一个思考的角度来理解一下 PostCSS 到底是一个什么东西。 showImg(h...

IamDLY 2019-08-28 18:19 评论0 收藏0
学点Webpack吧

摘要：下的包含很多匹配规则正则表达式，每一条代表加载什么类型的资源文件，上面写的就是加载样式文件，并使用和加载。现在问题来了，我想喝瓶茅台自动添加浏览器产商前缀。没问题，强大的生态圈给你提供了，一个更高大上的。开始 webpack 之旅 npm install webpack --save-dev 这里如果没有指定 -g全局安装，那么需要调用 node_modules 下的 webpack...

邱勇 2019-08-20 18:53 评论0 收藏0
谈谈PostCSS

摘要：它们有个统一的名字预处理器。面对以上问题，预处理器给出了非常可行的解决方案变量就像其他编程语言一样，免于多处修改。回到话题中，之所以会出现向预处理器这样子的解决方案，归根结底还是标准发展的滞后性导致的。前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？ CSS，就是这个看似不...

高胜山 2019-08-30 13:47 评论0 收藏0
谈谈PostCSS

摘要：它们有个统一的名字预处理器。面对以上问题，预处理器给出了非常可行的解决方案变量就像其他编程语言一样，免于多处修改。回到话题中，之所以会出现向预处理器这样子的解决方案，归根结底还是标准发展的滞后性导致的。前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？ CSS，就是这个看似不...

leap_frog 2019-08-21 17:05 评论0 收藏0
更便捷的css处理方式-PostCSS

摘要：本身并不直接用于处理样式，只有配合它的插件，才能完成相关的编译工作。是很容易引入当前的工作流中的。无论是还是，都有比较方便的方式。一般来说介绍一个东西都是要从是什么，怎么用的顺序来讲。我感觉这样很容易让大家失去兴趣，先看一下postcss能做点什么，有兴趣的话再往下看，否则可能没有耐心看下去。让我们开始吧 postcss能做什么补全css属性浏览器前缀手写的代码可以是这样的: ....

AlexTuan 2019-08-29 14:06 评论0 收藏0