Cssgrace_用于编写简短，优雅，面向未来的CSS

Web前端开发网

fly63.com

Cssgrace

GitHub:https://github.com/cssdream/cssgrace

网站描述:用于编写简短，优雅，面向未来的CSS

GitHub

css Grace是PostCSS的插件。它不会更改原始CSS语法，让CSS编写起来更简单，更优雅。实现了大部分常用的 IE Hack，获取图片宽高等，position: center 等功能。同时可以配合 Sass/Less 等预处理工具使用，最重要的是它不改变 CSS 原生的语法，让 CSS 写起来更简单，更优雅。

向前，CSS Grace 可以作为一种 Polyfill 工具，让你可以提前使用一些 CSS3 的新特性。

向后，CSS Grace 可以生成兼容旧浏览器的各种 Hack，让你无需担忧兼容性。

而你，只用书写和关心标准的 CSS 属性或属性值。

例如，骚年们会经常用下面这段 CSS 用来解决闭合浮动的问题：

.clearfix {
  *zoom: 1;
}
.clearfix:after {
  clear: both;
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

这个语法糖虽然好用，兼容性良好，但在 html 中会出现非常多的。甚至有些地方已经闭合了浮动，有些人为了保险起见，还是随手加上了。o(╯□╰)o

如此一来代码显得尤为冗余，而且加了很多无语意的 class。更进一步，我们知道如果触发了 BFC 的元素是自带闭合浮动特性的，clearfix 君略感违和。

Q: 那么，CSS Grace 如何解决呢？

A: 直接使用 clear: fix 即可。

input:

.foo {
  clear: fix;
}

output:

.foo {
  *zoom: 1;
}
.foo:after {
  clear: both;
}
.foo:before,
.foo:after {
  content: '';
  display: table;
}

Q: 那么，如何解决冗余问题呢？

A: 还是直接使用 clear: fix 即可，(^o^)/~

智能识别，如果存在触发 BFC 的属性，不生成语法糖。

input:

.foo {
  clear: fix;
  overflow: hidden; /* 已经可以闭合浮动了 */
}

output:

.foo {
  overflow: hidden; /* 已经可以闭合浮动了 */
}

就是那么任性！

目前功能处于初步阶段，欢迎大家提出更多意见和想法。

快速开始

下载并安装 Node.js
新建一个目录，比如 test ，在命令行中切换到该目录，安装 cssgrace。

npm install cssgrace

在项目目录新增一个 test.js，代码如下：

npm install chokidar

var fs       = require('fs')
var cssgrace = require('cssgrace')

var src = 'src/input.css'
console.info('Watching…\nModify the input.css and save.')

chokidar.watch(src, {
  ignored: /[\/\\]\./,
  persistent: true
}).on('all',
  function(event, path, stats) {
    var css = fs.readFileSync(src, 'utf8')
    fs.writeFileSync('build/output.css', cssgrace.pack(css))
  })

在项目目录新增一个 input.css，注意编码要和 fs.readFileSync 中的保持一致。输入测试的 CSS 代码片段，比如：

.foo::after {
  position: center;
  width: 210px;
  height: 80px;
  background: rgba(112, 26, 0, .3);
}

.bar {
  display: inline-block;
  opacity: .5;
}

在命令行中执行 node test，快去看看 output.css 中发生了什么吧！

.foo:after {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -105px;
  margin-top: -40px;
  width: 210px;
  height: 80px;
  background: rgba(112, 26, 0, .3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c701a00', endColorstr='#4c701a00');
}

:root .foo:after {
  filter: none\9;
}

.bar {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  opacity: .5;
  filter: alpha(opacity=50);
}

如何使用

Node Watch & 配合其他插件

使用 chokidar 模块实时监测 CSS 文件变动，同时可以加载其他插件，灵活扩展。

var fs       = require('fs')
var chokidar = require('chokidar')
var postcss  = require('postcss')
var cssgrace = require('cssgrace')
var nested   = require('postcss-nested') //CSS 代码嵌套
var minmax   = require('postcss-media-minmax') //使用 >=/<= 代替 @media 中的 min-/max
var selector = require('postcss-custom-selectors') //自定义选择器


var src = 'src/input.css'

console.info('Watching…\nModify the input.css and save.')


chokidar.watch(src, {
  ignored: /[\/\\]\./,
  persistent: true
}).on('all',
  function(event, path, stats) {
    var css = fs.readFileSync(src, 'utf8')
    var output = postcss()
      .use(minmax())
      .use(cssgrace)
      .use(selector())
      .use(nested)
      .process(css)
      .css;
    fs.writeFileSync('build/output.css', output)
  })

Grunt

npm install grunt-postcss

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('postcss-custom-selector')(),
          require('cssgrace'),
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
}

Gulp

npm install gulp-postcss

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var cssgrace = require('cssgrace');
var autoprefixer = require('autoprefixer-core')

gulp.task('default', function () {
    var processors = [
        require('cssgrace')
    ];
    gulp.src('src/input.css')
        .pipe(postcss(processors))
        .pipe(rename('gulp.css'))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);