来学习一下怎么使用postcss吧

2024年2月4日 153次阅读 来源: 杨佰

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

    原文作者：杨佰
    原文地址: https://segmentfault.com/a/1190000006735589
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞