Question

在LessCSS（1.7.x）中似乎有一些允许（前/后）处理CSS渲染树的模式。我想知道是否有可能使用访问者（我试过，但无法使其工作 - 或其他任何东西）在渲染时从CSS输出中删除属性。例如。如果输出是

a {
 font-size: 12px;
 -some-aribitrary-property: value;
}

我想在调用-some-arbitrary-property时从CSS输出中删除.toCSS。我似乎无法找到任何关于此的文档，仅提及即将发布的版本2.0 - 是否有人知道这是否可行，如果是，如何这样做，或者指出一些例子？

Answer 1

从Less v2开始，您可以使用plugins。您还可以在插件中使用访问者。可以在以下位置找到使用访问者的示例：https://github.com/less/less-plugin-inline-urls。

在您的访问者插件中，您可以使用如下所示的内容：

   visitRule: function (ruleNode, visitArgs) {
        if(ruleNode.name[0].value != '-some-aribitrary-property')
        {        
            return ruleNode;
        }
        else
        {
            return [];
        }   
    }

~~请注意，上述内容当前不会删除，但会生成: ;。我稍后会更新我的回答，另请参阅：Howto remove a entry from the tree in a Less visitor plugin。~~

它似乎不适用于v1.7中的访问者 - 你有一个例子吗？

for less＆lt; V2

<强>更新

正如@Joscha自己建议的那样：

var parser = new(less.Parser)(); parser.parse(yourLessData, function(err, tree) { var css = tree.toCSS({ plugins: [new RemoveProperty()] }); });

使用：

RemoveProperty = function() { this._visitor = new tree.visitor(this); }; RemoveProperty.prototype = { isReplacing: true, run: function (root) { return this._visitor.visit(root); }, visitRule: function (ruleNode, visitArgs) { if(ruleNode.name != '-some-aribitrary-property') { return ruleNode; } else { return []; } } };

结束更新

在名为lib/less的{{1}}中创建一个包含以下内容的文件：

custom-visitor.js

比less / lib / index.js添加(function (tree) { tree.RemoveProperty = function() { this._visitor = new tree.visitor(this); }; tree.RemoveProperty.prototype = { isReplacing: true, run: function (root) { return this._visitor.visit(root); }, visitRule: function (ruleNode, visitArgs) { if(ruleNode.name != '-some-aribitrary-property') { return ruleNode; } else { return []; } } }; })(require('./tree'));，此文件的结尾现在如下所示：

require('./custom-visitor.js');

最后require('./env'); require('./functions'); require('./colors'); require('./visitor.js'); require('./import-visitor.js'); require('./extend-visitor.js'); require('./join-selector-visitor.js'); require('./custom-visitor.js'); require('./to-css-visitor.js'); require('./source-map-output.js'); for (var k in less) { if (less.hasOwnProperty(k)) { exports[k] = less[k]; }}进入less / lib / parser.js，在第554行附近，以便代码看起来如下所示：

new(tree.RemoveProperty)(),

Answer 2

我试图对@ bass-jobsen的帖子进行编辑，但它被拒绝了，因为它应该是一个答案。因此，对于Less 1.7.x，您可以创建一个访问者类：

RemoveProperty = function() {
    this._visitor = new less.tree.visitor(this);
};
RemoveProperty.prototype = {
    isReplacing: true,
    run: function (root) {
        return this._visitor.visit(root);
    },
    visitRule: function (ruleNode, visitArgs) {
        if(ruleNode.name != '-some-aribitrary-property') {        
            return ruleNode;
        } else {
            return [];
        }
    }
};

然后在你的解析代码中，像这样使用它：

var parser = new(less.Parser)();
parser.parse(yourLessData, function(err, tree) { 
    var css = tree.toCSS({
        plugins: [new RemoveProperty()]
    });
});

不需要自己修补（比如在@ bass-jobsen的回答中）。

从呈现的Less CSS中删除属性

2 个答案: