2012-06-15 6 views
3

Давайте, у меня есть класс, как эта:Менее Css Наследование

.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?

+0

Могу ли я понять вас правильно, что вы ожидаете (или желая) в 'уль li', чтобы получить на' дисплей: block' от его родителей, но только если он находится в ''

ответ

3

Это неправильное использование. Если вы хотите использовать МЕНЬШЕ, так .navigation не класс, а подмешать (.navigation())

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

, а затем вы называете эту подмешать

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

Использование микса сделало трюк. TYVM для ответа! – darksoulsong

+0

Есть ли простой способ наследования и расширения классов с LESS? – Shimmy

Смежные вопросы