I’m now starting to get a little deeper into the LESS CSS language and i thought i would challenge myself early on, basically i wanted to create a namespace that contained functions i could reference for things such as box-shadow and border-radius. The problem i found instantly is that while setting static vars is great and all it’s not ideal for dynamic values that you may want to use in a non standard order, to overcome the problem i did a little reading on the LESS CSS website and found i could reference @arguments to retrieve all the values given in the function and then use ~',' to escape the comma so i could then for instance create multiple box shadows without the need to call the namespace again and again.

So to start off with i simply created the namespace and the function with an empty argument reference so that it didn’t expect any specific value pattern which would cause parsing errors, next i simply set the vendor prefixed properties for box-shadow and passed @arguments as the value:

#myNamespace {
    .box-shadow () {
        box-shadow:         @arguments;
        -moz-box-shadow:    @arguments;
        -webkit-box-shadow: @arguments;
    }
}

The next thing i did was simply call the namespace and function like you would normally do with LESS but instead of passing a specific set of arguments i gave it 3 sets of arguments that were comma seperated:

div {
    #myNamespace > .box-shadow(
        5px, 5px, 0, 6px, rgba(0,0,0, .5), ~',',
        7px, 7px, 0, 8px, rgba(51,51,51, .4), ~',',
        inset, 0, 0, 3px, rgba(0,0,0, .4)
    );
}

So there you have it, a simple way to create multiple box shadows using one function inside a custom namespace using the LESS CSS language.