用户定义的功能与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);
}
}
我可以弄明白的唯一方法，但它是非常有限的，因为我必须有多个mixin：
.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()函数。 但是，这会杀死使用LessPHP，Crunch，SimpLess编译生产无文件文件的选项。
据我所知，没有财产论证：你必须写下来。
也就是说，一个函数将返回一个计算值或指令（属性和计算值）。
CSS中没有成千上万的属性，它不是一个拥有数百个类和函数的CMS，所以你的列表将不会像你想象的那么长。 如果你想做这样复杂的事情，你应该使用其他CSS预处理器或后端语言来生成你的CSS。 或者更好地保持简单。
也就是说，Lessphp允许用户功能：
lessphp有一个简单的扩展接口，您可以在编译期间实现用LESS代码公开的用户函数。 虽然他们可能有点棘手，因为你需要使用lessphp类型的系统。
请注意，您还可以轻松地将自定义函数添加到默认的Less编译器中，这样可以使用客户端less.js编译器进行测试，并使用命令行lessc编译器进行生产。
少于1.x
npm install lib/functions.js文件 在tree.functions对象中添加自定义函数（本例中为returncenter() ），例如如下所示：
tree.functions = {
returncenter: function() {
return new(tree.Anonymous)('center');
},
//original function below
}
运行grunt dist
在上一步之后，您可以在您的HTML中包含dist / less-1.xx / js或使用dist/lessc编译器编译Less代码。
少于2.x
npm install 创建一个文件caleld lib/less/functions/custom.js并在其中写下以下内容：
var Anonymous = require("../tree/anonymous"),
functionRegistry = require("./function-registry");
functionRegistry.addMultiple({
returncenter: function() {
return new(Anonymous)('center');
}
});
打开lib/less/function/index.js文件并追加require("./custom"); 到return functions;之前的寄存器函数列表return functions;
运行grunt dist
现在您可以使用以下Less代码：
selector {
property: returncenter();
}
上述Less代码将编译为以下CSS代码：
selector {
property: center;
}