Search code examples
twitter-bootstraplessmixins

How to properly override a box-shadow bootstrap mixin?

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

Solution

  • 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