Less.js: Создание пользовательских функций

Возможно, чтобы отличить это от примеси и приблизиться к синтаксису CSS, это может быть:

@darkfadein(<strong i="6">@color</strong>, @value): fadein(darken(<strong i="7">@color</strong>, @value));

Вроде как переменная, зависящая от параметров (которая, если подумать, является своего рода функцией =)

+1 к синтаксису @souldreamer .

Но с @souldreamer «s синтаксис не woul быть , чтобы написать Возможное некоторые
значения в переменные и использовать их снова.

может использовать этот синтаксис:

  @darkfadein(<strong i="9">@color</strong>, @value) {
     <strong i="10">@foo</strong>: darken(<strong i="11">@color</strong>, @value);
     return: fadein(@foo);
  }

возможно, в более поздних версиях можно будет сделать что-то вроде этого:

  @darkfadein(<strong i="15">@color</strong>, @value) {
     <strong i="16">@foo</strong>: darken(<strong i="17">@color</strong>, @value);
     for(<strong i="18">@i</strong> = 0; <strong i="19">@i</strong> < 5; @i++): {
       <strong i="20">@foo</strong>: darken(<strong i="21">@foo</strong>, @i);
     };
     return: fadein(@foo);
  }

У меня аналогичная потребность использовать какую-то функцию для возврата значения. Думаю, есть два возможных решения. Одним из решений было бы расширить синтаксис переменной как @Deltachaos, описанный выше, что по сути:

@grid-width(<strong i="7">@columns</strong>, @column-width) {
    <strong i="8">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: @grid-width(6,60);
}

Второй подход - использовать миксины. Поскольку компилятор в любом случае обрабатывает миксины как функции JavaScript, _добавление функции return к mixins_, вероятно, будет простым решением. Вот как бы это выглядело:

.grid-width(<strong i="13">@columns</strong>, @column-width) {
    <strong i="14">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

«Функциональные директивы» SASS обеспечивают аналогичный результат, хотя я считаю, что это решение микширования было бы намного более элегантным.

Проблемы 508 и 609 также связаны с этим.

Думаю, лучше всего @tylertate . Я считаю, что это самый простой вариант, потому что, как вы сказали, less уже анализирует миксины как JavaScript.

Возможно ли подобное с миксинами?

.grid-width(<strong i="8">@columns</strong>, @column-width) {
    <strong i="9">@computedWidth</strong> = @columns*@column-width;
    for (var i = 0; i <= 36; i++) {
      <strong i="10">@computedWidth</strong> = darken(<strong i="11">@computedWidth</strong>, i);
    }
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

Я бы предпочел увидеть что-то вроде определенного синтаксиса плагина LESS и перенести логику программирования в плагин JavaScript LESS. Эти предложения несовместимы с текущим синтаксисом и дизайном LESS.

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

Итак, какое было разрешение?

Нам нужно это задокументировать. см. https://github.com/cloudhead/lesscss.org/issues/54

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

less = { functions: { rgbstr: function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);}}};

на данный момент нет возможности добавлять функции в версию узла, но должно быть

Спасибо, я ценю ответ и возможность извлечь JavaScript из синтаксиса LESS.

Однако отсутствие необходимости связывать возвращаемое значение миксина с определенным свойством кажется таким понятным вариантом использования. Любой, кто использует сетку, захочет сделать то, что пытался сделать @Deltachaos . Было бы здорово иметь возможность достичь этого, не опускаясь до уровня создания плагина.

Это непростая вещь - если вам нужны циклы или они должны жить в плагине.

Однако, если он вызывает на 3 функции меньше с конкретными значениями, я согласен, что имеет смысл извлекать это внутри меньше, чтобы сделать синтаксис СУХИМ - нет смысла писать плагин для извлечения того факта, что вы хотите затемнить на 5% в одном месте.

Я повторно открыл, но это может быть продублировано где-нибудь еще, посмотрим.

в настоящий момент все переменные из области видимости миксинов копируются во внешнюю область видимости - это своего рода способ возврата переменных ... но это вызывает ужасные проблемы, и я хочу удалить его.

дубликат № 538

"все переменные из области видимости миксинов копируются во внешнюю область"

Тьфу, правда? Да, давайте удалим такое поведение. Я бы предпочел, чтобы переменные были помечены для экспорта или чего-то еще, кроме автоматической утечки. Для меня это не ожидаемое поведение. Переменные должны иметь блочную область видимости.

да, это похоже на поддержку функций через баг черного хода

Я нашел хитрость: если вы объявите глобальную js-функцию, вы сможете использовать ее позже!

<strong i="6">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="7">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain только что нашли такой же хак :)

@fabienevain Хорошо работает, спасибо ~: +1:

Я обнаружил , что вы можете создать фактические функции из того же Eval тюрьму доступа process.mainModule ... Только загвоздка в том , что вы , возможно , придется перебрать process.mainModule.children и матч less.js , если этот порядок для некоторых изменений в причине будущее. Я не планирую повторяться, просто слепо доверяя третьему модулю.

К сожалению, вы не можете получить доступ к require , но вы можете получить доступ к fs и другим, которые уже требуются less, чего достаточно:

<strong i="10">@anything</strong>: `(function() {
    // console.log(process.mainModule.children[0].exports); // node fs is here
    // console.log(process.mainModule.children[2].children) // children of less, more node modules!
    var less = process.mainModule.children[2].exports;

    less.functions.functionRegistry.add("firstfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("00ff00");
    });

    less.functions.functionRegistry.add("secondfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("ff0000");
    });
})()`;


test {
    background: firstfunc(white);
    color: secondfunc(black);
}

Изюминкой реальной функции является эта переменная context , которая содержит интересные детали, такие как обрабатываемый файл, поэтому вы можете, например, создать собственный импорт uri данных svg с настройками и т. Д.

Изменить. Интересно, почему даже вводятся обратные кавычки, если JS пытаются не допустить. Мне нравится мой LESS как можно более копируемый и вставляемый, поэтому плагины мне не подходят.

Мне нравится мой LESS как можно более копируемый и вставляемый, поэтому плагины мне не подходят.

Итак, вы предполагаете, что ваш код _is_ "копирует и вставляет", даже если вам нужен компилятор less.js на основе node.js в ваших встроенных обратных кавычках, но в то же время чувствуете, что что-то пойдет не так, если вы будете использовать плагины? Дох!

@ seven-phase-max мои инструменты сильно испорчены. Если бы я мог контролировать аргументы командной строки lessc, я бы, вероятно, использовал плагины. (Или есть один основной плагин, в который я все набиваю) Но нет, я испортил свою среду, и у меня есть ~ 100 тем WP в рабочем пространстве Eclipse, от которых я просто не могу избавиться, потому что все команды сборки и т. Д. Застряли там .

@Ciantic Прежде всего, вам не нужны какие-либо конкретные параметры командной строки для использования плагина пользовательских функций - если необходимо (# 2479). Во-вторых, я сомневаюсь, что какая-либо глубоко запутанная среда запрещает вам управлять параметрами компилятора (в конце концов, lessc "исполняемый файл" - это просто сценарий консоли ОС, перенаправляющий на фактический сценарий узла - так что можно легко внедрить _anything_ туда так или иначе).

В любом случае мой комментарий был просто о рекламе «копирование и вставка по сравнению с плагинами». в то время как оказывается, что это просто обходной путь для неработающих инструментов / цепочки сборки.

Плагин импорта @ seven-phase-max выглядит как раз то, что мне нужно! Хотя я хотел бы определить функции внутри моего проекта, а не в глобальном реестре, таким образом я могу редактировать функции внутри проекта и не беспокоиться о том, что сломается на миллиард файлов меньше, если я внесу изменения в глобальную функцию.

@Ciantic

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

Читайте дальше. Первоначальный черновик моего запроса на вытягивание прошел по простому пути глобальной регистрации, но, получив некоторое понимание, позже я усовершенствовал его, чтобы выполнить локальную регистрацию в области видимости. Например

.my-mixin() {
  <strong i="10">@plugin</strong> "my-func.js";
  <strong i="11">@value</strong> : my-func();
}

не приведет к утечке my-func за пределы области действия примеси. Пути, конечно, также относятся к файлу, содержащему объявление @plugin , поэтому все аккуратно упаковано и отправлено для использования третьими сторонами; 100% _transparantly_.

Это было моей целью при разработке этой функции. ^ _ ^

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

Я нашел хитрость: если вы объявите глобальную js-функцию, вы сможете использовать ее позже!

<strong i="7">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="8">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain Как я могу использовать меньше функций в @fn ? Например, hsvsaturation 、 unit и т. Д. Thx.

@hiyangguo

Вы не должны использовать встроенные выражения JS, точка.
Соответствующим образом создавайте и регистрируйте пользовательские функции.
Прочтите документацию. Это все есть: http://lesscss.org/features/#plugin -atrules-feature

@rjgotten Хорошо, большое спасибо.