3

假设我有一堂这样的课:

.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 重用这样的类?

4

1 回答 1

3

这不是正确的用法。如果要使用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;
           }
       }
    }
}
于 2012-11-04T23:43:44.570 回答