如何正确覆盖 box-shadow bootstrap mixin？答案

【问题标题】：How to properly override a box-shadow bootstrap mixin?如何正确覆盖 box-shadow bootstrap mixin？
【发布时间】：2012-10-28 17:08:16
【问题描述】：

这是代码：

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

这是LESS风格：

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

我想覆盖/取消子列表上的 mixin，所以我尝试了这个：

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

...但它没有工作。我让它工作的唯一方法是明确覆盖 mixin 上的每一行：

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

那么ul ul li { .box-shadow(none); }有什么问题？

【问题讨论】：

【解决方案1】：

太糟糕了，当它破坏整个编译时我没有检查错误的输出，但是

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

...工作正常。 :P

【讨论】：

【解决方案2】：

如果你使用带有 SCSS/SASS 的 twitter bootstrap，我会使用内置的 mixins，它处理浏览器特定的标志：

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

【讨论】：