Как вы вызываете функцию less.js - PullRequest
Новая
       5

Как вы вызываете функцию less.js

3 голосов
/ 20 ноября 2011

Я даже не совсем уверен, как это спросить. LESS CSS Framework содержит несколько функций для управления цветом, я хотел бы знать, как вызывать эти функции самостоятельно, чтобы изменить цвет. Проблема в том, что эти функции расположены внутри другой функции и определены так: 

(function (tree) {
tree.functions = {
    darken: function(color, amount){
        ...stuff...
    }
}
}

Я знаю достаточно, чтобы предположить, что darken - это метод tree.functions , но я не знаю, как его назвать, потому что он внутри анонимная функция (функция (дерево) .

[править] После получения решения от @pradeek я создал эту функцию на случай, если она кому-нибудь понадобится. Легко адаптируется ко всем другим функциям, которые LESS имеет: 

var lessColor = {
/*
|--------------------------------------------------------------------------
| Darken
|--------------------------------------------------------------------------
*/
darken: function(col, val){
    col = col.replace(/#/g, '');    //Remove the hash

    var color = new less.tree.Color(col);   //Create a new color object
    var amount = new less.tree.Value(val);      //Create a new amount object
    var newRGB = less.tree.functions.darken(color, amount); //Get the new color
    var hex = (newRGB.rgb[0] + 256 * newRGB.rgb[1] + 65536 * newRGB.rgb[2]).toString(16);
    hex = hex.split('.', 1);    //Remove everything after the decimal if it exists

    //Add padding to the hex to make it 6 characters
    while(hex.length < 6){
        hex = hex+'0';
    }
    hex = '#'+hex;  //Add the hash

    return hex; //return the color
}
}

И вы можете назвать это так: 

$(this).css('background', lessColor.darken($(this).css('background'), .25);

Ответы [ 3 ]

3 голосов
/ 20 ноября 2011

EDIT: Функция darken использует встроенные примитивы.

Вот как использовать функцию затемнения 

var color = new less.tree.Color([255, 255, 255], 0.5),
    amount = new less.tree.Value(5);
less.tree.functions.darken(color, amount); // returns a Color object
1 голос
/ 25 мая 2015

Хотя в этом ответе не говорится о том, как вызывать функции less.js для управления цветом, в нем предусмотрен другой подход к управлению цветом, так как это, кажется, главная цель.

Для этого существует удобная библиотека JavaScript: TinyColor .

TinyColor - это небольшая, быстрая библиотека для манипулирования цветом и преобразования в JavaScript. Он допускает много форм ввода, обеспечивая преобразование цветов и другие функции полезности цвета. У него нет зависимостей.

Чтобы затемнить цвет, просто 

var darkenedColor = tinycolor("#f00").darken(20).toString(); // "#990000"
1 голос
/ 20 ноября 2011

Посмотрите на не минимизированный код LESS 1.7 прямо здесь .

Строка 141 это: 

less = {};
tree = less.tree = {};

И находится в глобальной области видимости,Таким образом, объект less определен в браузере.

Далее, посмотрите на строку 1254: 

tree.functions = {

Ваша функция darken определена где-то там.

Вы можете позвонить darken так: 

less.tree.functions.darken(color, amount);
...