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

Я только недавно начал работать с 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.


less
person Nathan L.    schedule 31.03.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Насколько я знаю, спора о собственности нет: вы должны это записать.

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

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

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

person FelipeAls    schedule 31.03.2012
comment
Благодарю за ваш ответ. Вместо того, чтобы полагаться на lessphp, я решил просто сделать dimensions.less и импортировать его. Файл содержит .width() .padding() и т. д. - person Nathan L.; 01.04.2012

arrow_upward
0
arrow_downward

Обратите внимание, что вы также можете легко добавлять пользовательские функции к компилятору 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. Создайте файл с именем 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;    
}
person Bass Jobsen    schedule 06.10.2014
comment
Это кошмар - модифицировать исходную библиотеку, потому что другим приходится использовать те же модифицированные коды, чтобы все заработало. - person Light; 18.09.2015