1

我使用 node.js、grunt 和 RECESS 将我的 *.less 文件编译成 *.css 文件。
这是我的 Gruntfile.js 文件

 module.exports = function(grunt) {

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    recess: {
        dist: {
            options: {
                compile: true
            },
            files: {
                'css/style.css': 'less/style.less'
            }
        }
    },
    watch: {
        recess: {
            files: ['less/*.less'],
            tasks: ['recess'],
            options: {
                spawn: false,
            },
        }
    }
});

grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['recess', 'watch']);

};

但现在我需要更改输出 *.css 文件中的属性顺序，例如

.class {
  margin: 0;
  padding: 0;

  width: auto;
  min-width: 0;
  max-width: 0;
  height: auto;
  min-height: 0;
  max-height: 0;

  display: block;
  visibility: hidden;
  overflow: hidden;
  float: none;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  text-align: left;
  text-decoration: none;
  text-indent: 1;
  text-transform: uppercase;
  letter-spacing: 1;
  vertical-align: top;
  line-height: 1;
  white-space: normal;
  word-spacing: normal;

  font: 1em sans-serif;
  font-family: Arial, sans-serif;
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;

  opacity: 1;
  color: red;
  border: 1px solid red;
  background: #fff url(../i/bg.png) no-repeat 0 0;  

  z-index: 0
  cursor: default;

}

我发现strict-property-order.js https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js#L36我想它可以帮助我，但我不知道如何用它？

4

1 回答 1

1

要更改您希望输出属性的顺序，请order编辑strict-property-order.js.

例如：

order = [ 'position' , 'top' , 'right' , 'bottom' , 'left' ]

可以改为：

order = [ 'position' , 'right' , 'top' , 'bottom' , 'left' ]

但是，之所以没有简单的 aconfig.json或类似的东西，您可以将其放在项目的根目录中并进行编辑，而不必弄乱节点模块，这是因为在属性的排序方式中，recess 是固执己见的。

如果你想要更多的自由，还有其他选择（例如各种 .less linters 和可以在编译后运行的 css-comb 之类的东西）。

于 2015-07-28T10:48:06.950 回答