Less CSS 继承性问题

Question

假设我有一个像这样的类:

.navigation{
    display: block;
    ul li{
        float: left;
        a{display: block;}
    }

}

..并且以下标记：

<nav>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
    </ul>
</nav>

现在，我想用刚刚创建的类来格式化我的导航。所以我会这样做：

nav{.navigation;}

我的问题是：我无法让“ul”及其子元素按照我的预期继承属性。只有“nav”标签获得“display: block”属性，但其他元素仍未被样式化。

是否有任何方式可以像这样重用类，使用Lesscss？

- darksoulsong

---

我理解你的意思是，你希望 ul li 从其父元素继承 display: block，但仅当它在 <nav> 中时（或者无论何时调用都是如此）？ - ScottS

Answer 1

这不是正确的用法。如果你想使用LESS，那么.navigation不是一个类，而是一个混合器（.navigation()）。

.navigation(){
    display: block;
    ul{
       li{
          float: left;
          a{
             display: block;
          }
       }
    }
}

然后您调用此混合器

nav{.navigation;}

另一种选择是使用 without class：

nav{
   display: block;
   ul{
      li{
        float: left;
        a{
           display: block;
        }
      }
   }
}  

或者使用 class 属性：

<nav class="navigation">
<ul>
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
</ul>

.navigation{
    display: block;
    ul{
       li{
           float: left;
           a{
               display: block;
           }
       }
    }
}

- ZdenekD

---

有没有一种简单的方法可以使用LESS继承和扩展类？ - Shimmy Weitzhandler