Как расширить компилятор Less с помощью пользовательской функции, использующей плагин

Question

Начиная с версии 2 Less вы можете использовать плагины. Вы также можете использовать эти плагины для добавления пользовательских функций в Less, примеры: https://github.com/less/less-plugin-advanced-color-functions/ и https://github.com/bassjobsen/less-plugin-cubehelix

Вдохновленный на https://github.com/less/less.js/issues/2341 я хочу добавить пользовательскую функцию twotimesandten меньше, так что:

@start: 10;
.test {
result: twotimesandten(@start);
}

компилируется в:

.test {
result: 30;
}

После прочтения http://lesscss.org/usage/, мне интересно, как это сделать?

Answer 1

Сначала напишите плагин для использования в браузере. Вы создаете плагин, используя следующий код:

var TwoTimesAndTen = {
    install: function(less) {
        less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
    }
};
less = { 
    env: "development",
    plugins: [TwoTimesAndTen]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>

Обратите внимание, что вы должны всегда писать имя своей функции в нижнем регистре.

Чтобы использовать приведенный выше код для компилятора командной строки, вы должны создать файл с именем less-plugin-twotimesandten/index.js, Этот файл должен содержать следующий код:

var TwoTimesAndTen = {
    install: function(less) {
        less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
    }
};
module.exports = TwoTimesAndTen;

Затем вы можете запустить следующую команду в вашей консоли:

echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --plugin=less-plugin-twotimesandten/index.js -

Выше будет выводить:

.test {
  result: 30;
}

Чтобы установить этот плагин для глобального использования, вы должны создать второй файл с именем less-plugin-twotimesandten/package.json, Пакет package.json должен содержать как минимум следующие строки кода:

{
    "name": "less-plugin-twotimesandten",
    "version": "0.0.1",
    "description": "twotimesandten plugin for less.js",
    "main": "index.js"
}

После сохранения файла package.json вы можете запустить в консоли следующую команду:

npm install less-plugin-twotimesandten

Убедитесь, что вы находитесь за пределами вашего less-plugin-twotimesandten каталог первый. В предыдущей команде less-plugin-twotimesandten это путь к вашему плагину.

Теперь вы можете запустить следующую команду:

echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --twotimesandten -

Чтобы написать плагин, который работает как на стороне клиента, так и на сервере, вы должны прочитать: http://caolanmcmahon.com/posts/writing_for_node_and_the_browser/ (не стесняйтесь вносить вклад в https://github.com/less/less-meta/issues/5 тоже).

Перепишите содержание вашего less-plugin-twotimesandten/index.js следующее:

(function(exports){
    exports.install= function(less) {
     less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
      };
})(typeof exports === 'undefined'? this['TwoTimesAndTen']={}: exports); 

Вышеизложенное не меняет использование командной строки. Для использования в браузере вы можете использовать следующий код:

<script src="less-plugin-twotimesandten/index.js"></script>
<script>
less = { 
    env: "development",
    plugins: [TwoTimesAndTen]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>