A style solution that helps you write more concise and elegant CSS

Postcss-salad is a postCSs-based CSS solution that provides a set of quick at-rules and default syntax declarations to help you quickly build project styles and libraries. It outputs code only when called, rather than directly providing CSS libraries. Not only does Salad provide next-generation CSS syntax support, it also provides basic SASS syntax, clockwise shortening of properties, REM padding, basic graphics drawing, customizable styles of inline-SVG, and automatic beM class name conversion, among other useful features.

Documents

Demo

input:

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

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;
}Copy the code

Node

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

Add PostCSS to your build tool:

npm install postcss --save-devCopy the code

Load Postcss salad as a PostCSS plugin:

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

Gulp

Add Gulp PostCSS: to your build tool:

npm install gulp-postcss --save-devCopy the code

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('.')); });Copy the code

webpack

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

Each feature in the salad is dependent on the corresponding plug-in, so they have their own configuration. You can pass in its configuration for each plug-in via the Features attribute class, and if a feature is passed a value of false, it will be turned off:

example:

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