How to properly override a box-shadow bootstrap mixin?

Question

This is the code:

<ul>
    <li></li>
    <li></li>
    <ul>
        <li></li>
        <li></li>
    </ul>
</ul>

And this is the LESS style:

ul li { .box-shadow(0 1px 3px rgba(0,0,0,.25)); }

I want to override/cancel the mixin on the sub-list, so I tried this:

ul ul li { .box-shadow(none); }

...but it didn't work. The only way I got it to work was by explicitly overriding each line on the mixin:

ul ul li { 
          -webkit-box-shadow: none;
             -moz-box-shadow: none;
                  box-shadow: none;
         }

So wha'ts wrong with ul ul li { .box-shadow(none); }?

Answer 1

Too bad I didn't check the bad output when it broke the whole compilation, but

ul ul li { .box-shadow(none); }

...is working just fine. :P

Answer 2

If you use twitter bootstrap with SCSS/SASS, I would use the builtin mixins, which handels browser specific flags:

ul ul li { @include box-shadow(none); }