ahwyX100 ahwyX100 - 27 days ago 11
Less Question

Less.js : how to avoid multiple prefix in less file definition ?

For example, I have a html fragment definition as below:

<div class="login">
<div class="header">...</div>
<div class="content">...</div>
</div>
.......
<div class="home">
<div class="header">...</div>
<div class="content">...</div>
</div>


I have a less file called login.less, with content as below:

.login {
....
}

.login .header {
....
}

.login .content {
....
}


As you can see above, every time I add a class under "login" div, I have to write something like
.login .class
, I have to add
.login
before them. Is there any method in less.js to define a base class name so that I don't need to add
.login
everytimes?

Answer

Using less you can do as @Harry commented on your question, just nest his children's, on this way, you avoid to repeat the parent selector:

.login {
    .header {
        // Code
    }
    .content {
        // Code
    }
}
Comments