CODEWITHSUNDEEP
twitter-bootstraplessmixins
Wallace Sidhrée
Wallace Sidhrée

Reputation: 11617

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

Upvotes: 5

Views: 12384

Answers (2)

Fa11enAngel
Fa11enAngel

Reputation: 4810

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

Upvotes: 7

Wallace Sidhr&#233;e
Wallace Sidhr&#233;e

Reputation: 11617

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

Upvotes: 11

Related Questions