2014-10-28 2 views
0

В LessCSS (1.7.x) есть некоторые шаблоны, которые позволяют (pre/post) -процессить дерево визуализации CSS. Мне было интересно, можно ли использовать посетителя (я пробовал это, но не мог заставить его работать или что-то еще), чтобы удалить свойства из вывода CSS при рендеринге. . если выход былУдалить свойства из рендеринга Меньше CSS

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

Я хотел бы удалить -some-arbitrary-property с выхода CSS при вызове .toCSS. Я не могу найти документацию об этом, только ссылки на предстоящую версию 2.0 - кто-нибудь знает, возможно ли это, и если да, то как это сделать или указать мне на какой-то пример?

ответ

1

Я попытался сделать это изменить на @ бас-jobsen переживайте, но он был отклонен с причиной он должен быть ответ. Итак, для менее 1.7.х, вы создаете класс посетителя:

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()] 
    }); 
}); 

заплаток менее само по себе (как в @ бас-jobsen в ответ) не требуется.

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

Обратите внимание, что выше в настоящее время не снимает, но производит : ;. Далее я уточню свой ответ, см. Также: Howto remove a entry from the tree in a Less visitor plugin.

Он не работает для посетителей в версии 1.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')); 

чем меньше/Lib/index.js добавить 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)(), меньше/Lib/parser.js, вокруг л ине 554, так что код выглядит так, как показано ниже:

visitors = [ 
    new(tree.joinSelectorVisitor)(), 
    new(tree.processExtendsVisitor)(), 
    new(tree.RemoveProperty)(), 
    new(tree.toCSSVisitor)({compress: Boolean(options.compress)}) 
    ], 
+0

Привет, Бас, большое спасибо, я знаю, что для 2.0 есть много улучшений, но мне это нужно для LessCSS 1.7.x - есть ли способ сделать что-то подобное? – Joscha

+0

ну, для старой версии вы можете добавить своих собственных посетителей, добавив конец 'lib/less/index.js', добавив require ('./ custom-visitor.js'); –

+0

, похоже, не работает для посетителей в версии 1.7. У вас есть пример для этого? – Joscha

Смежные вопросы