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);
    }
}

我能想出来的唯一方法，但它非常有限，因为我必须有多个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编译生成.less文件的选项。

Answer 1

据我所知，没有属性论证：你必须把它写下来。

也就是说，函数将返回计算值或指令（属性/属性和计算值）。

CSS中没有数千个属性，它不是具有数百个类和函数的CMS，因此您的列表不会像您想象的那么长。如果你想做这么复杂的事情，你应该使用其他CSS预处理器或后端语言来生成你的CSS。或者更好地保持简单那就是lessphp allows for user functions：

lessphp有一个简单的扩展接口，您可以在其中实现在编译期间将在LESS代码中公开的用户函数。它们可能有点棘手，因为你需要使用lessphp类型的系统。

Answer 2

请注意，您还可以轻松地将自定义函数添加到默认的Less编译器，这使您可以使用客户端less.js编译器进行测试，并使用命令行lessc编译器进行生产。

少于1.x

从github下载并解压缩源代码：https://github.com/less/less.js/releases/latest
运行npm install
打开lib/functions.js文件

在returncenter()对象中添加自定义函数（本例中为tree.functions），例如如下：

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

运行grunt dist

在上一步之后，您可以在HTML中包含dist / less-1.x.x / js，或使用dist/lessc编译器编译Less代码。

少于2.x

从github下载并解压缩源代码：https://github.com/less/less.js/archive/master.zip
运行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;

运行grunt dist

现在您可以使用以下Less代码：

selector {
property: returncenter();    
}

前面的Less代码将编译成以下CSS代码：

selector {
property: center;    
}

使用LessCSS的用户定义函数？

2 个答案: