css插件学习之--rucksackcss

官方API

rucksackcss请点击链接查看

安装

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rucksack = require('rucksack-css');

gulp.task('rucksack', () => {
  return gulp.src('src/*.css')
    .pipe(postcss([ rucksack() ]))
    .pipe(gulp.dest('dist'));
});

神奇的功能

• 定位

position: relative 20% auto;

• 清除浮动

clear: fix;

• 字体文件路径

@font-face {
  font-path: '/my/font/file';
}

• 十六进制GRBA

color: rgba(#fff, 0.8);

-别名配置

@alias {
    d:display;
    o:opcity;
    va:vertical-align,;
    p:position;
    t:top;
    b:bottom;
    l:left;
    r:right;
    f:float;
    w:weight;
    h:height;
    mx:min-width;
    mh:min-height;
    xw:max-width;
    xh:max-height;
    lh:line-height;
    m:margin;
    mt:margin-top;
    mb:margin-bottom;
    mr:margin-right;
    ml:margin-left;
    p:padding;
    pt:padding-top;
    pb:padding-bottom;
    pr:padding-right;
    pl:padding-left;
    o:overflow;
    ox:overflow-x;
    oy:overflow-y;
    c:clear;
    b:border;
    bt:border-top;
    bb:border-bottom;
    br:border-right;
    bl:border-left;
    bgc: background-color;
    bgm: background-image;
    bgs: background-size;
    bgp: background-position;
    bgr: background-repeat;
    f:font;
    fs:font-size;
    fw:font-weight;
}