Пользовательские функции с LessCSS?

Question

Я только недавно вошел в LessCSS, и я сталкиваюсь с тем, что я считаю серьезным ограничением, и мне было интересно, есть ли способ сделать это ?? Я хочу сказать, что где-то читал, что Sass допускает определенные пользователем функции, но будет ли LessCSS делать то же самое?

Что я хочу сделать:

@fs: 16;

// either return the value
.s(@t,@s,@u) {
    // return @t/@s*@u;
}
#elem {
    margin-top: .s(30,@fs,1em);
    width: .s(900,@fs,1em);
    .child {
        width: .s(100,900,100%);
    }
}

// or have a property argument
.s(@t,@s,@u,@p) {
    @{p}: @t/@s*@u;
}
#elem {
    .s(30,@fs,1em,margin-top);
    .s(900,@fs,1em,width);
    .child {
        .s(100,900,100%,width);
    }
}

Единственный способ, которым я могу это выяснить, но он очень ограничен, потому что мне нужно иметь несколько миксинов:

.s(@t,@s,@u,@p) when (@p = margin-top) { margin-top: @t/@s*@u; }
// margin[-top|-right|-bottom|-left]
// padding[-top|-right|-bottom|-left]
.s(@t,@s,@u,@p) when (@p = width) { width: @t/@s*@u; }
.s(@t,@s,@u,@p) when (@p = height) { height: @t/@s*@u; }

Я знаю, что всегда могу изменить файл less.js, добавив функцию пробела, например встроенную функцию round() или ceil(). Но это убивает возможность компиляции файлов .less для производства с использованием LessPHP, Crunch, SimpLess.

Answer 1

Насколько я знаю, аргумент свойства отсутствует: вы должны записать его.

То есть функция вернет вычисленное значение или инструкцию (и) (свойство (я) и вычисленные значения).

В CSS нет тысяч свойств, это не CMS с сотнями классов и функций, поэтому ваш список не будет таким длинным, как вы можете себе представить. Вы должны использовать другие препроцессоры CSS или язык бэкэнда для генерации вашего CSS, если вы хотите делать такие сложные вещи. Или лучше не усложняйте.
Тем не менее, lessphp допускает пользовательские функции :

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

Answer 2

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

Для Меньше 1.x

1. Загрузите и разархивируйте исходный код github по адресу: https://github.com/less/less.js/releases/latest
2. Выполнить npm install
3. Откройте файл lib/functions.js

4. Добавьте вашу пользовательскую функцию (returncenter() в этом примере) внутри объекта tree.functions, например, следующим образом:

   tree.functions = {
   returncenter: function() {
   return new(tree.Anonymous)('center');
   },
   //original function below
   }
   

5. Пробег grunt dist

После предыдущего шага вы можете включить dist / less-1.x.x / js в ваш HTML или скомпилировать код Less с помощью компилятора dist/lessc.

Для Меньше 2.x

1. Загрузите и распакуйте исходный код из github по адресу: https://github.com/less/less.js/archive/master.zip
2. Пробег npm install

3. Создайте файл caleld lib/less/functions/custom.js и запишите в него следующее содержимое:

   var Anonymous = require("../tree/anonymous"),
       functionRegistry = require("./function-registry");
   
   functionRegistry.addMultiple({
   returncenter: function() {
   return new(Anonymous)('center');
   }
   });
   

4. Откройте файл lib/less/function/index.js и добавьте require("./custom"); к списку функций регистра непосредственно перед return functions;

5. Пробег grunt dist

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

selector {
property: returncenter();    
}

Предыдущий код Less будет скомпилирован в следующий код CSS:

selector {
property: center;    
}