css - RECESS 更改属性的顺序

Question

我使用 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我想它可以帮助我，但我不知道如何使用它？

Answer 1

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

例如:

顺序 = [
'位置'
， '顶部'
， '正确的'
， '底部'
， '左边'
]


可以改成:

顺序 = [
'位置'
， '正确的'
， '顶部'
， '底部'
， '左边'
]

但是，为什么不存在简单的 config.json 或类似的东西，您可以将其放入元素的根目录并进行编辑而不必弄乱节点模块的原因是因为休会以属性(property)的排序方式自以为是。

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