成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

來學習一下怎么使用postcss吧

張率功 / 2432人閱讀

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

網(wǎng)上關(guān)于postcss是什么的介紹真的是太多了。。。
簡單粗暴的說，postcss就是一款類似babel的樣式轉(zhuǎn)換器!
多說無益，下面就用一個demo來演示一下postcss的用法。
初始化目錄 
cd ~/workspace/postcss #進入你自己的工具目錄
mkdir postcss
cd postcss
mkidr css
npm init #初始化package.json，一路回車即可
編寫測試的css文件

進入到css目錄，新建一個index.css文件，鍵入如下內(nèi)容：

button {
    border-radius: 4px;
    transition: all 0.8s;
    color: $red;
    width: 100px;
}
安裝相關(guān)npm包 
npm install gulp gulp-postcss --save #安裝需要的包，這里使用gulp來構(gòu)建、打包
編寫gulpfile.js

postcss文件夾根目錄新建一個gulpfile.js文件，鍵入如下內(nèi)容：

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/"));
});

執(zhí)行gulp css，測試一下打包是否正常！

查看生成的build/index.css文件，和原始文件一樣。
因為目前processors數(shù)組還沒有加入任何插件！
增加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;
    });
}

重新執(zhí)行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;
    });
}

重新執(zhí)行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;
    });
}

重新執(zhí)行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;
}
經(jīng)過了上面這三個簡單的processor之后，相信大家對postcss的認識會更直白一點了吧。。。
postcss插件 autoprefixer 
npm install autoprefixer --save
和之前我們自己實現(xiàn)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;
    }
}

執(zhí)行gulp css再次重新打包，結(jié)果如下：

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已有的一些插件，而很少自己去造輪子。
當然，如果你有這樣的特殊需求或者想學習一下，希望上面那三個例子可以幫到你，大家加油！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111481.html

相關(guān)文章

  • PostCSS 是個什么鬼東西？

    摘要：參考的文章最權(quán)威的初認識一個不錯的東西理解等插件解析技術(shù)大漠的系列文章，應(yīng)用型很強，推薦一個年齡差不多的開發(fā)者的解釋一篇稍微理論化解釋的文章一個開發(fā)模式簡單的優(yōu)劣比較大家也可以直接閱讀我的博客 前言 最近大漠前輩在群里發(fā)關(guān)于PostCSS的系列文章，但是耗子姐姐又說看了有點云里霧里的感覺，所以這篇文章將按一個思考的角度來理解一下 PostCSS 到底是一個什么東西。 showImg(h...

    IamDLY 評論0 收藏0

  • 學點Webpack吧

    摘要：下的包含很多匹配規(guī)則正則表達式，每一條代表加載什么類型的資源文件，上面寫的就是加載樣式文件，并使用和加載?，F(xiàn)在問題來了，我想喝瓶茅臺自動添加瀏覽器產(chǎn)商前綴。沒問題，強大的生態(tài)圈給你提供了，一個更高大上的。 開始 webpack 之旅 npm install webpack --save-dev 這里如果沒有指定 -g全局安裝，那么需要調(diào)用 node_modules 下的 webpack...

    邱勇 評論0 收藏0

  • 談?wù)?em>PostCSS

    摘要：它們有個統(tǒng)一的名字預(yù)處理器。面對以上問題，預(yù)處理器給出了非?？尚械慕鉀Q方案變量就像其他編程語言一樣，免于多處修改?；氐皆掝}中，之所以會出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標準發(fā)展的滯后性導致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發(fā)展卻唯獨少了一個角色？ CSS，就是這個看似不...

    高勝山 評論0 收藏0

  • 談?wù)?em>PostCSS

    摘要：它們有個統(tǒng)一的名字預(yù)處理器。面對以上問題，預(yù)處理器給出了非常可行的解決方案變量就像其他編程語言一樣，免于多處修改?；氐皆掝}中，之所以會出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標準發(fā)展的滯后性導致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發(fā)展卻唯獨少了一個角色？ CSS，就是這個看似不...

    leap_frog 評論0 收藏0

  • 更便捷的css處理方式-PostCSS

    摘要：本身并不直接用于處理樣式，只有配合它的插件，才能完成相關(guān)的編譯工作。是很容易引入當前的工作流中的。無論是還是，都有比較方便的方式。 一般來說介紹一個東西都是要從是什么，怎么用的順序來講。我感覺這樣很容易讓大家失去興趣，先看一下postcss能做點什么，有興趣的話再往下看，否則可能沒有耐心看下去。讓我們開始吧 postcss能做什么 補全css屬性瀏覽器前綴 手寫的代碼可以是這樣的: ....

    AlexTuan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<