Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Revert .box-shadow() mixin JS change #4976

WilliamStam opened this Issue · 20 comments

directive block with unrecognised format on line 253 in file 'mixins.less':
[252]: // Multiple shadow solution from
[253]: @props: ~"@{arguments}".replace(/[\[\]]|\,\sX/g, '');
[254]: -webkit-box-shadow: @props;
[Done - Failed]

Process finished with exit code -5



have to revert back to 2.1.0 :(


Same issue, also, what's up with the ``?

@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

They seem to be the main reason I'm getting errors however when I'm changing them to single quotes ' ' the compiled values are messed up.

-webkit-box-shadow: "0 0 8px #E5E5E5 X".replace(/[[]\]]|,sXsX/g, ')';
-moz-box-shadow: "0 0 8px #e5e5e5 X".replace(/[[]\]]|,sXsX/g, ')';
box-shadow: "0 0 8px #E5E5E5 X".replace(/[[]]]]|,sXsX/g, ')';

Reverting mixins back to 2.1.0 until a fix is released :)


you'll need to make a change to tables and dropdowns aswell... for it to compile


The backticks enclose JavaScript to be evaluated by the LESS compiler. It's documented at the bottom of the LESS page.

If your compiler doesn't like it, then you're using an incomplete compiler!

Of course it will be much nicer if/when LESS adds native support for multiple @arguments.


moving away from being css now... hmm this isnt too good.. gonna cause some really messy code. dotLess is the main .net compiler.. the biggest problem with this is that i somehow doubt you would be able to compile the less files into a css file pre deployment? will have to run something over the css file to render the js stuff in it


It can be precompiled. The JS is evaluated by the compiler to allow more complex functions, or in this case, regular expressions. It still compiles to plain CSS.


acording to you can do @height: document.body.clientHeight; im pretty sure that something like that wont be able to be pre compiled.. hope BS doesnt use stuff like this in the future crosses fingers


Also not really happy with this change to use javascript functions (same problem with lessphp). See issue on lessjs; less/less.js#939
(Changed in #4763)


@fat and @markdotto PLEASE dont use this in bootstrap :( it takes away the "easy to throw around various projects" part that makes bootstrap so awesome


+1 for keeping the less vanilla as it makes bootstrap so much more usable LessPHP is my main choice (as @WilliamStam says)


i got it to compile with node lessc but still.. i would far rather no js in the bootstrap less files.


I was experiencing this problem with dotLESS as well. I tried WinLess which uses the native less.js and is up to date...then I found this lightweight command line approach that also uses the native less.js compiler and incorporated it into my Visual Studio pre-build events. Works great!


javascript is possible in less, but IMO using it in less produces less that is ugly and unmaintable - it should be a last resort.

the feature needed to duplicate what the javascript is doing is discussed in


if we can get agreement and it isn't too difficult an implementation it may be in the imminent 1.3.1 release of less.js


Further to @agatronic's comment, it's likely that direct JavaScript interpretation will be deprecated in a future version of LESS. JavaScript-embedded LESS does not compile in a few environments, even environments with a native JS parser.


My original solution (allow the declaration of multiple shadows without having to escape) did not use javascript, and appeared as follows:

.box-shadow(@shadow1, @shadow2) {
  -webkit-box-shadow: @shadow1, @shadow2;
     -moz-box-shadow: @shadow1, @shadow2;
          box-shadow: @shadow1, @shadow2;
.box-shadow(@shadow1, @shadow2, @shadow3) {
  -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
     -moz-box-shadow: @shadow1, @shadow2, @shadow3;
          box-shadow: @shadow1, @shadow2, @shadow3;

I submitted the newer version, with javascript, when @markdotto asked what happens when the user specifies more than 3 shadows.

@markdotto Should I submit the original version again? Possibly with 4-5 shadows covered?


Ah, another clever workaround with mixin guards. Hadn't thought of that. That seems like an okay temporary fix too, as the user still has the option of using escaped strings for more than 3 shadows.

mdo commented

We'll revert this in 2.1.2 and encourage folks use the variable method for multiple shadows if folks need the variable or function support there. See here for the options available:


Thanks guys! ^_^

In the meantime, we're working to improve LESS to create some more intuitive solutions in the future.


Resolved in 2.1.2-wip.

@mdo mdo closed this

The solution I've been using for quite some time uses guards as well but with a slightly terser structure to the one @Luis-TP suggested. It's not optimal as it doesn't support an arbitrary number of arguments, butas @matthewdl points out native LESS support for this should eliminate the need for these kinds of work-arounds in future.

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
// Aliases for up to 5 shadows to avoid the need for passing in escaped strings
.box-shadow(@a, @b) { @join: @a, @b; .box-shadow(@join); }
.box-shadow(@a, @b, @c) { @join: @a, @b, @c; .box-shadow(@join); }
.box-shadow(@a, @b, @c, @d) { @join: @a, @b, @c, @d; .box-shadow(@join); }
.box-shadow(@a, @b, @c, @d, @e) { @join: @a, @b, @c, @d, @e; .box-shadow(@join); }
@fleuryc fleuryc referenced this issue in clevertech/YiiBooster

unable to compile via LessCompiler #143

@chhantyal chhantyal referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.