使用postcss开发一套中文的样式表

[zhouwenbin]

项目地址

项目地址：https://github.com/zhouwenbin/postcss-chinese-stylesheets
所有属性：https://github.com/zhouwenbin/chinese-css-properties
所有值：https://github.com/zhouwenbin/chinese-css-values

安装

在命令行输入

$ npm install postcss-chinese-stylesheets --save-dev

配置

postcss

新建一个postcss.js文件，代码如下

// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var cncss = require('postcss-chinese-stylesheets');

// CSS to be processed
var css = fs.readFileSync('input.css', 'utf8');

// Process our chinese stylesheets css using postcss-chinese-stylesheets
var output = postcss()
  .use(cncss())
  .process(css)
  .css

console.log('\n===>Output CSS:\n', output);

在命令行输入node postcss.js执行

grunt

在根目录新建gruntfile.js，代码如下

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
          require('postcss-chinese-stylesheets')(),
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });

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

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

在命令行输入grunt postcss

gulp

在根目录新建gulpfile.js，代码如下

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var cncss = require('postcss-chinese-stylesheets')
var autoprefixer = require('autoprefixer-core')

gulp.task('default', function () {
    var processors = [
        autoprefixer({ browsers: ['> 0%'] }), //Other plugin
        cncss()
    ];
    gulp.src('src/*.css')
        .pipe(postcss(processors))
        .pipe(rename('gulp.css'))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);

在命令行输入gulp

实现方法

这东西只是好玩，前前后后只花了几个小时。依托postcss，我们很容易自定义样式替换规则，随便找个postcss插件，修改index.js文件

var postcss = require('postcss');

module.exports = postcss.plugin('postcss-ass', function() {
    return function(css) {

        css.eachDecl(function transformDecl(decl) {
            decl.prop = decl.prop.replace('背景附属', 'background-attachment');
            decl.prop = decl.prop.replace('背景颜色', 'background-color');
            decl.prop = decl.prop.replace('背景图片', 'background-image');
            decl.prop = decl.prop.replace('背景位置', 'background-position');
            decl.prop = decl.prop.replace('背景重复', 'background-repeat');
            decl.prop = decl.prop.replace('背景', 'background');

            decl.value = decl.value.replace('中', 'center');
            decl.value = decl.value.replace('左', 'left');
            decl.value = decl.value.replace('右', 'right');
            decl.value = decl.value.replace('上', 'top');
            decl.value = decl.value.replace('下', 'bottom');

            if (decl.value.indexOf('!重要') >= 0) {
                decl.value = decl.value.replace(/\s*!重要\s*/, '');
                decl.important = true;
            }
        });

    };
});

prop就是属性，value就是值。接着就可以这么写样式了

.foo {
    背景位置: 中 !重要;
}

编译后变成

.foo {
    background-position: center !important;
}

只要规则足够多，就可以用中文写样式了，有点蛋疼就是了。但是一些颜色英文记不住，可以用中文来代替。

提交代码

如果有翻译的不好不对的，或者有漏掉的，欢迎提交pull request。
有一点需要注意的是，如果名字包含相同的中文字，字少的放后面，不然会出错。修改完先跑下测试用例。

$ git clone https://github.com/YOU/postcss-chinese-stylesheets.git
$ git checkout -b patch-1
$ npm install
$ npm test