Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

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

WilliamStam opened this Issue Sep 5, 2012 · 20 comments


None yet

directive block with unrecognised format on line 253 in file 'mixins.less':
[252]: // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
[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 lesscss.org 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


barryvdh commented Sep 5, 2012

Also not really happy with this change to use javascript functions (same problem with lessphp). See issue on lessjs; cloudhead/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

sams commented Sep 5, 2012

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

patja commented Sep 5, 2012

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 https://github.com/duncansmart/less.js-windows#readme that also uses the native less.js compiler and incorporated it into my Visual Studio pre-build events. Works great!


lukeapage commented Sep 5, 2012

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.

Lalem001 commented Sep 5, 2012

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 Sep 5, 2012

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: http://markdotto.com/2012/04/05/comma-separated-values-in-less-mixins/

Thanks guys! ^_^

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


mdo commented Sep 14, 2012

Resolved in 2.1.2-wip.

@mdo mdo closed this Sep 14, 2012

mmilo commented Nov 27, 2012

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 Nov 30, 2012


unable to compile via LessCompiler #143

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment