User defined functions with 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?

What I'm wanting to do:

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

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

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).

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 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.

Notice that you also can easily add custom functions to the default Less compiler, which enable you to use the client side less.js compiler for testing and the command line lessc compiler for production.

For Less 1.x

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

After the preceding step you can include dist/less-1.xx/js in your HTML or compile your Less code with the dist/lessc compiler.

For Less 2.x

var Anonymous = require("../tree/anonymous"),
    functionRegistry = require("./function-registry");

functionRegistry.addMultiple({
returncenter: function() {
return new(Anonymous)('center');
}
});

Now you can use the following Less code:

selector {
property: returncenter();    
}

The preceding Less code will compile into the following CSS code:

selector {
property: center;    
}

上一篇: NSSegmentedControl颜色

下一篇: 用户定义的功能与LessCSS？