Working with Less: avoiding tree inheritance - less

Question

When I want to write something like
.security-list ul {
list-style: none;
margin-left: 0;
}
.security-list ul li {
padding: 10px 9px;
display: inline-block;
}
.security-list ul li a {
width: 234px;
color: #000;
text-decoration: none;
display: inline-block;
background-image: url(http://domain.com/infopage-icons.png);
background-position: 200px 0;
background-repeat: no-repeat;
}
.security-list ul li a.basket,
.security-content h3.basket {
background-position: 200px 0;
}
.security-list ul li a.creditcard,
.security-content h3.creditcard {
background-position: 200px -205px;
}
I end up writting:
.security-list ul {
list-style: none;
margin-left: 0;
li {
padding: 10px 9px;
display: inline-block;
a {
width: 234px;
color: #000;
text-decoration: none;
display: inline-block;
background-image: url(http://domain.com/infopage-icons.png);
background-position: 200px 0;
background-repeat: no-repeat;
&.basket,
.security-content h3.basket {
background-position: 200px 0;
}
&.creditcard,
.security-content h3.creditcard {
background-position: 200px -205px;
}
}
}
but the problem I have is this will compile the last 2 blocks as
.security-list ul li a.basket,
.security-list ul li a .security-content h3.basket { ... }
.security-list ul li a.creditcard,
.security-list ul li a .security-content h3.creditcard { ... }
where what I really want is:
.security-list ul li a.basket,
.security-content h3.basket{ ... }
.security-list ul li a.creditcard,
.security-content h3.creditcard { ... }
What can I do in LESS that he knows that I do not want to inherit the hole tree, but still not repeat myself on the same style rule, in other words, don't create 2 rules with the same content...

Answer 1

Your problem is that you want to ignore the nest inside a nest, which is not (at least currently) possible. If it did work, it also would make for challenging code to read, as you would not expect a non-nesting item to be defined inside a nest.
I think one elegant solution to this, especially in your case, is to abstract the nest even further. This code gets close to what you desire by locating it all within a .security nest:
.security {
&-list ul {
list-style: none;
margin-left: 0;
li {
padding: 10px 9px;
display: inline-block;
a {
width: 234px;
color: #000;
text-decoration: none;
display: inline-block;
background-image: url(http://domain.com/infopage-icons.png);
background-position: 200px 0;
background-repeat: no-repeat;
}
}
}
&-list ul li a,
&-content h3 {
&.basket {
background-position: 200px 0;
}
&.creditcard {
background-position: 200px -205px;
}
}
}
The above disaccociates the call from the deep nesting in the list, which does require a small repetition of code in the ul li a call, but it produces this CSS:
.security-list ul {
list-style: none;
margin-left: 0;
}
.security-list ul li {
padding: 10px 9px;
display: inline-block;
}
.security-list ul li a {
width: 234px;
color: #000;
text-decoration: none;
display: inline-block;
background-image: url(http://domain.com/infopage-icons.png);
background-position: 200px 0;
background-repeat: no-repeat;
}
.security-list ul li a.basket,
.security-content h3.basket {
background-position: 200px 0;
}
.security-list ul li a.creditcard,
.security-content h3.creditcard {
background-position: 200px -205px;
}
Assuming the .security-list class is only used on a container that holds a true list (like a ul), then if you are able to remove the background-position from the straight security-list ul li a selector, you can then reduce the selector of the .basket and .creditcard by removing the ul li porition of that to make it just .security-list a.basket, etc. This would reduce the selector nesting bloat on that call.