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

要更改希望输出属性的顺序，请在var element = Driver.FindElement(By.XPath("//a[contains(text(), 'About us' or 'about us')]"));中修改<div class="call-wrapper-middle"> <button href="/show/phonenumber-middle" onclick="__gaTracker('send', 'event', 'buttons', 'click', 'phone-number-middle');" target="blank" id="call-phone-middle" style="display: none;"><i class="fa fa-phone"></i>Call us</button> <div class="call-number-middle" style="display: block;"> <a href="tel:555" class="number">555</a></div> </div>数组。

例如：

order

可以更改为：

strict-property-order.js

然而，之所以没有简单的order = [ 'position' , 'top' , 'right' , 'bottom' , 'left' ]，或类似的东西，你可以把它放在你的项目的根目录和编辑而不必弄乱节点模块是因为凹陷是自以为是物业的订购方式。

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

RECESS更改属性的顺序

1 个答案: