我最近刚加入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文件的选项。

最佳答案

据我所知,没有属性参数:您必须将其写下来。

也就是说,函数将返回计算值或指令(属性和计算值)。

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

09-25 16:04