來學習一下怎么使用postcss吧

張率功發布于2019-08-29 11:11 / 2420人閱讀

摘要：如何使用和上面的一樣，加入到即可，如下此處省略行此處省略行此處省略行為了驗證插件確實生效了，修改一下文件，如下執行再次重新打包，結果如下這里就介紹這兩個插件來拋磚引玉一下其實大部分都會使用已有的一些插件，而很少自己去造輪子。

網上關于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能帶來哪些好處深度學習吧機器學習吧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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