Hi,
I’m having an hard time understanding what is going on on my code.
I have the following piece of html:
<body>
<main>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</main>
</body>
I am using LESS to apply boostrap classes on the html.
My less file is like this:
@import "bootstrap/bootstrap.less";
main{
.container-fixed();
}
nav{
.navbar;
.navbar-default;
}
nav ul{
.nav;
.navbar-nav;
}
Which gives me this result:
Looking good. However, shouldn’t this alternative give the exact same result:
@import "bootstrap/bootstrap.less";
main {
.container-fixed();
}
nav {
.navbar;
.navbar-default;
ul {
.nav;
.navbar-nav;
}
}
Notice that the difference is that I nested the ul
inside the nav
rule. From what I read that is supposed to work in LESS. However, the result is the following:
So, what is going on? Shouldn’t both the less stylesheets provide the same result?