更少的 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 重用这样的类？

Answer 1

这是不正确的用法。如果要使用LESS，那么.navigation不是类，而是mixin(.navigation())

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

然后你调用这个 mixin

nav{.navigation;}

另一种选择是不使用类：

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

或与类：

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