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 に答える