postcss-tools

    2.0.3 • Public • Published

    postcss-tools

    postcss-tools 基于 postcss-salad 二次开发

    Postcss-salad

    Build Status Version

    Postcss-salad 是一个基于 PostCSS 的 CSS 解决方案,它提供了一系列快捷的 at-rule 和默认语法声明来帮助你快速地搭建项目样式与类库,它只在调用时才输出代码,而不是直接提供 CSS 类库。
    沙拉不仅提供了下一代css语法支持,还提供了基础的sass的语法、属性顺时针简写、rem填充、基础图形绘制、可定制样式的inline-svg以及bem类名自动转化等实用的功能。

    Documents

    Demo

    input:

    /* short property */
    .box {
      position: fixed 0 0 *;
    }
    /* utils */
    .ellipsis2 {
      @utils-ellipsis 3;
    }
    /* shape */
    .circle-a {
      circle: 50px #ff0;
    }

    output:

    .box {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
    }
    .ellipsis2 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
    .circle-a {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ff0;
    }

    Usage

    Add Postcss salad to your build tool:

    npm install postcss-salad --save-dev

    Node

    require('postcss-salad').process(YOUR_CSS, { /* options */ });

    PostCSS

    Add PostCSS to your build tool:

    npm install postcss --save-dev

    Load Postcss salad as a PostCSS plugin:

    postcss([
      require('postcss-salad')({ /* options */ })
    ]).process(YOUR_CSS, /* options */);

    Gulp

    Add Gulp PostCSS: to your build tool:

    npm install gulp-postcss --save-dev

    Enable Postcss salad within your Gulpfile:

    var gulp = require('gulp');
    var postcss = require('gulp-postcss');
     
    gulp.task('css', function () {
      return gulp.src('./src/*.css').pipe(
        postcss([
          require('postcss-salad')({ /* options */ })
        ])
      ).pipe(
        gulp.dest('.')
      );
    });

    webpack

    module.exports = {
      module: {
        loaders: [
          {
            test:   /\.css$/,
            loader: "style-loader!css-loader!postcss-loader"
          }
        ]
      },
      postcss: function () {
        return [require('postcss-salad')];
      }
    }

    options

    沙拉里每一个特性都是依赖于对应的插件的,因此他们都有自己的配置。 你可以通过 features 属性类为每一个插件传入它的配置,假设某个特性传入的值为false,则该特性会被关闭:

    example:

    var options = {
      browser: ['ie > 8', 'last 2 version'],
      features: {
        "bem": false, //pass boolean false can disable the plugin
        "inlineSvg": {
          "path": "src/svgs"
        }
      }
    }

    Plugins

    Postcss-salad powered by the following plugins (in this order):

    Keywords

    none

    Install

    npm i postcss-tools

    DownloadsWeekly Downloads

    5

    Version

    2.0.3

    License

    MIT

    Last publish

    Collaborators

    • cloudyan