[go: up one dir, main page]
❤
npm
Sign UpSign In

postcss-chafingdish

1.0.0 • Public • Published

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 = {
  browsers: ['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):

Readme

Keywords

none

Package Sidebar

Install

npm i postcss-chafingdish

Repository

github.com/ElemeFE/postcss-salad

Homepage

github.com/ElemeFE/postcss-salad

Weekly Downloads

0

Version

1.0.0

License

MIT

Last publish

Collaborators

  • myronliu347
Try on RunKit
Report malware