LESS Nested Rule & - less

Question

Due to comments I add that .vmiddle, .vmiddle td, .vmiddle th doesn't work in my case because I'm using bootstrap and it defines .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td with vertical-align: top;
which take precedence.
I want to perform this css:
.vmiddle,
table.vmiddle thead tr td,
table.vmiddle tfoot tr td,
table.vmiddle tbody tr td,
table.vmiddle thead tr th,
table.vmiddle tfoot tr th,
table.vmiddle tbody tr th,
table thead.vmiddle tr td,
table tbody.vmiddle tr td,
table tfoot.vmiddle tr td,
table thead.vmiddle tr th,
table tbody.vmiddle tr th,
table tfoot.vmiddle tr th,
table thead tr.vmiddle td,
table tbody tr.vmiddle td,
table tfoot tr.vmiddle td,
table thead tr.vmiddle th,
table tbody tr.vmiddle th,
table tfoot tr.vmiddle th,
table thead tr td.vmiddle,
table thead tr th.vmiddle,
table tbody tr td.vmiddle,
table tbody tr th.vmiddle,
table tfoot tr td.vmiddle,
table tfoot tr th.vmiddle {
vertical-align: middle;
}
somehow i get it to work with this rules :
.vmiddle {
vertical-align:middle;
& {
table& {
& thead , tfoot, tbody {
tr, {
td, th {
vertical-align: middle;
}
}
}
}
thead&, tbody&, tfoot& {
table & {
tr {
td, th {
vertical-align: middle;
}
}
}
}
tr& {
thead &, tbody &, tfoot & {
table & {
td, th {
vertical-align: middle;
}
}
}
}
td&, th& {
tr & {
thead &, tbody &, tfoot & {
table & {
vertical-align: middle;
}
}
}
}
}
}
but looks actually more complicated than the standard soluction :D
Is there any shorter way to do it and without defining vertical-align:middle 5 times ?

Answer 1

It looks like your not using the '&' selectors properly.
From lesscss.org:
the & combinator - it’s used when you want a nested selector to be
concatenated to its parent selector, instead of acting as a
descendant. This is especially important for pseudo-classes like
:hover and :focus.
For example:
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
Will output
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
But in your case it doesn't look like you even need to use it.
Edit:
Regarding the specificity issue (mentioned in the comments below) simply add a class on the root (table) element and the specificity problem goes away. So if we call the calss .table:
LESS:
.table .vmiddle
{
vertical-align: middle;
td, th
{
vertical-align: middle;
}
}

Answer 2

In most cases you should be able to shorten those long css rules. In certain situations it won't work but generally you should avoid unnecessary long selectors to get better performance and readability. An example of methodically reducing the rules:
Any thead, tbody, tfoot, tr, th and td will always be in a table, you can remove the table selector part.
.vmiddle,
.vmiddle thead tr td,
.vmiddle tfoot tr td,
.vmiddle tbody tr td,
.vmiddle thead tr th,
.vmiddle tfoot tr th,
.vmiddle tbody tr th,
thead.vmiddle tr td,
tbody.vmiddle tr td,
tfoot.vmiddle tr td,
thead.vmiddle tr th,
tbody.vmiddle tr th,
tfoot.vmiddle tr th,
thead tr.vmiddle td,
tbody tr.vmiddle td,
tfoot tr.vmiddle td,
thead tr.vmiddle th,
tbody tr.vmiddle th,
tfoot tr.vmiddle th,
thead tr td.vmiddle,
thead tr th.vmiddle,
tbody tr td.vmiddle,
tbody tr th.vmiddle,
tfoot tr td.vmiddle,
tfoot tr th.vmiddle {
vertical-align: middle;
}
Any tr, th and td will always either be in a thead, tbody or tfoot, you can remove those. Many rules are now identical, remove those too.
.vmiddle,
.vmiddle tr td,
.vmiddle tr th,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle th,
tr.vmiddle th,
tr.vmiddle th,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle {
vertical-align: middle;
}
Any th and td will always be a child of a tr, remove tr. Remove all duplicates again.
.vmiddle,
.vmiddle td,
.vmiddle th,
td.vmiddle,
th.vmiddle {
vertical-align: middle;
}
td.vmiddle and th.vmiddle are already covered by .vmiddle.
.vmiddle,
.vmiddle td,
.vmiddle th {
vertical-align: middle;
}