来学习一下怎么使用postcss吧

网上关于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已有的一些插件,而很少自己去造轮子。
当然,如果你有这样的特殊需求或者想学习一下,希望上面那三个例子可以帮到你,大家加油!


yangbai
如果非要用一种东西来记录我得生命历程,我会用朋友!

良好的心里,出众的发挥!

2.8k 声望
43 粉丝
0 条评论
推荐阅读
利用Charles做代理测试电脑上写的H5页面
做H5页面的同学可能经常会遇到一个场景,就是电脑上调试好的页面怎么在手机上访问测试呢? 下面就介绍一种自己经常使用的方式,利用Charles代理软件来实现! 安装Charles 直接去官网下载对应的系统版本安装即可。...

杨佰2阅读 5.8k

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.6k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.5k评论 2

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...

chokcoco17阅读 1.3k

封面图
CSS 如何根据背景色自动切换黑白文字?
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:

XboxYan19阅读 1.7k

封面图

良好的心里,出众的发挥!

2.8k 声望
43 粉丝
宣传栏