1

I have this in my html:

<script type="text/javascript">
    less = {
        env: "development", // or "production"
        async: false,       // load imports async
        fileAsync: false,   // load imports async when in a page under
                            // a file protocol
        poll: 1000,         // when in watch mode, time in ms between polls
        functions: {
            returnCenter: function (value, context) {
                return 'center';
            }
        },      // user functions, keyed by name
        dumpLineNumbers: "comments", // or "mediaQuery" or "all"
        relativeUrls: false,// whether to adjust url's to be relative
                            // if false, url's are already relative to the
                            // entry less file
        rootpath: ":/a.com/"// a path to add on to the start of every url
                            //resource
    };
</script>
<script src="less.js" type="text/javascript"></script>

So in functions, how can I create and use functions in my less file?

Thanks and good luck!

P.D. This returnCenter, doesn't work. With or without parameters.

Sasidhar Vanga
  • 3,384
  • 2
  • 26
  • 47
Pablo Vicente Munuera
  • 49
  • 1
  • 13

1 Answers1

0

For some reason you should write your function names in lowercase. Also should your function return a proper type.

Try:

<script>
less = { 
    env: "development",
    functions: { 
        returncenter: function(context, value) {
            return new(less.tree.Anonymous)('center');
        }
    }
};
</script>

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

NB also see: User defined functions with LessCSS?

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 2
    Yep, since Less inherits the case-insensitive syntax of CSS, the function identifier to look for is first converted to a lowercase string, hence function definition must always use lowercase id (but in the Less code itself `returnCenter`would also be valid). In that sense it's usually less confusing to use CSS-style naming instead of the camel style (i.e. "return-center" instead of "returnCenter"). [**Demo**](http://codepen.io/seven-phases-max/pen/qCjLg?editors=100). – seven-phases-max Oct 06 '14 at 21:39