Question

Let´s say I have a class like this one:

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

}

.. and the following markup:

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

Now, I would like to format my navigation with the class I just made. So I would do like this:

nav{.navigation;}

My problem is: I can´t make the “ul” and its child elements to inherit the properties as I expected. Only the “nav” tag gets the “display: block” property, but the other elements remain unstyled.

Is there any way to reuse classes like this, using Lesscss?

Answer 1

This is not correct usage. If you want to use LESS, so .navigation is not a class, but mixin (.navigation())

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

and then you call this mixin

nav{.navigation;}

Another option is to use without class:

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

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