postcss-graceful

Postcss-graceful 是一个能够帮助你更加写出更加简洁、优雅的CSS的样式解决方案。

Usage no npm install needed!

<script type="module">
  import postcssGraceful from 'https://cdn.skypack.dev/postcss-graceful';
</script>

README

Postcss-graceful

Build Status [Version]

Postcss-graceful 是一个能够帮助你更加写出更加简洁、优雅的CSS的样式解决方案。

Postcss-graceful不仅提供了下一代css语法支持，还提供了基础的sass的语法、属性顺时针简写、rem填充、基础图形声明、可定制样式的inline-svg以及bem风格类名转化等实用的功能。

Examples

顺时针简写

/* before */
a {
  position: absolute 1em 2em 3em 4em;
}
a {
  position: absolute 1em * * 4em;
}

/* after */
a  {
  top: 1em;
  right: 2em;
  bottom: 3em;
  left: 4em;
  position: absolute;
}
a  {
  top: 1em;
  left: 4em;
  position: absolute;
}

可定制的inline-svg

/* before */
@svg-load nav url(../svgs/nav.svg) {
  path:nth-child(2){
    fill:#0ff
  };
}
h1 {
  background: svg-inline(nav)
}

/* after */
h1 {
  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 50 50\'><path d=\'M10 12h30v4H10z\'/><path d=\'M10 22h30v4H10z\' fill=\'#0ff\'/><path d=\'M10 32h30v4H10z\'/></svg>");
}

基础sass语法

/* before */
$pass: green !default;

@define-placeholder foo {
  background: pink;
}

.bar {
  @extend foo;

  background-color: @color;
  color: $pass;
}

/* after */
.bar {
  background: pink;
}

.bar {

  background-color: green;
  color: green;
}

Usage

Add Postcss graceful to your build tool:

npm install postcss-graceful --save-dev

Node

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

PostCSS

Add [PostCSS] to your build tool:

npm install postcss --save-dev

Load Postcss graceful as a PostCSS plugin:

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

Gulp

Add [Gulp PostCSS] to your build tool:

npm install gulp-postcss --save-dev

Enable Postcss graceful within your Gulpfile:

var postcss = require('gulp-postcss');

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

options

you can change the plugin's behaviour by the options

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

Plugins

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