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:
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。
- 在项目目录新增一个 test.js，代码如下：
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
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']);
链接: https://fly63.com/nav/3264
