This repository has been archived by the owner. It is now read-only.
沙拉是一个能够帮助你写出更加简洁、优雅的CSS的样式解决方案
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
src
.eslintrc.js
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
salad-logo.svg

README.md

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):

  • precss: a tool that allows you to use Sass-like markup in your CSS files
  • postcss-css-reset: reset style is dependent on normalize.css and combined with best practice.
  • postcss-utils: help you create functional fragments quickly via at-rules.
  • postcss-bem: implementing BEM as at-rules
  • postcss-calc: plugin to reduce calc()
  • postcss-initial: fallback initial keyword
  • postcss-inline-svg: reference an SVG file and control its attributes with CSS syntax.
  • postcss-short: lets you write styles more logically by extending shorthand properties in CSS.
  • postcss-shape: draw basic shape with specified syntax in css rule
  • node-pixrem: generates pixel fallbacks for rem units.
  • autoprefixer: parse CSS and add vendor prefixes to CSS rules using values from Can I Use