0

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

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

我想-some-arbitrary-property在调用.toCSS. 我似乎找不到任何关于此的文档，仅引用即将发布的 2.0 版 - 有谁知道这是否可能，如果是的话，该怎么做，或者给我举个例子？

4

2 回答 2

3

从 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 [];
        }   
    }

请注意，上述内容当前不会删除但会生成: ;. 稍后我将更新我的答案，另请参阅：如何在 Less 访问者插件中从树中删除条目。

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

小于 < 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在调用中创建一个文件，custom-visitor.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'));

与在 less/lib/index.js add 中相比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]; }}

最后new(tree.RemoveProperty)(),进入 less/lib/parser.js，在第 554 行附近，代码如下所示：

visitors = [
    new(tree.joinSelectorVisitor)(),
    new(tree.processExtendsVisitor)(),
    new(tree.RemoveProperty)(),
    new(tree.toCSSVisitor)({compress: Boolean(options.compress)})
    ],
于 2014-10-28T14:16:46.803 回答
1

我试图对@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()]
    });
});

不需要修补 less 本身（如@bass-jobsen 的答案）。

于 2014-10-29T12:30:43.000 回答