用户定义的功能与LessCSS? [英] User defined functions with LessCSS?

问题描述

我最近才进入LessCSS，遇到了我认为是主要的限制，我想知道是否有办法做到这一点?我想说我读过Sass允许用户定义函数的地方，但是LessCSS会做同样的事情吗?

I have just recently gotten into LessCSS and I am running into what I feel is major limitation and I was wondering if there was a way to do this?? I want to say I read somewhere that Sass allows for user defined functions but will LessCSS do the same?

我想做什么:

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

我能弄清楚的唯一方法，但是它非常有限，因为我必须有多个mixins:

The only way I can figure it out, but it is very limited because I have to have multiple mixins:

.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文件的选项.

I know I can always modify the less.js file to add a spacing function like the built-in round() or ceil() function. But, that kills the option of compiling the .less files for production using LessPHP, Crunch, SimpLess.

推荐答案

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

As far as I know, there's no property argument: you must write it down.

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

That is, a function will return a calculated value or instruction(s) (property/ies and calculated values).

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

There aren't thousands of properties in CSS, it's not a CMS with hundreds of classes and functions, so your list won't be as long as you can imagine. You should use other CSS preprocessors or a backend language to generate your CSS if you want to do such complicated things. Or better keep it simple.
That said, lessphp allows for user functions:

lessphp有一个简单的扩展接口，您可以在其中实现在编译过程中以LESS代码公开的用户功能.但是，它们可能会有些棘手，因为您需要使用lessphp类型系统.

lessphp has a simple extension interface where you can implement user functions that will be exposed in LESS code during the compile. They can be a little tricky though because you need to work with the lessphp type system.

这篇关于用户定义的功能与LessCSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！