How do I convert this nested selectors to LESS? - less

Question

I am a novice in LESS CSS, but I have spent lot of time learning the CSS. Currently am migrating my CSS code to a LESS for learn and improve myself. I stumbled upon this when am doing the migration process,
Existing CSS Code
#sidebar {
-webkit-transition: background 1.2s ease, padding 1.8s linear;
background: #3c3c3c;
}
#sidebar .actionMenuList {
margin-bottom: 20%;
}
#sidebar .actionMenuList .topNavMenuList,
#sidebar .navigationMenuList .topNavMenuList {
-webkit-transition: background 0.3s ease-in-out;
border-bottom: .1em solid #FDF7F8;
}
Writing this LESS Code
#sidebar {
-webkit-transition: background 1.2s ease, padding 1.8s linear;
background: #3c3c3c;
.actionMenuList {
margin-bottom: 20%;
.topNavMenuList {
-webkit-transition: background .3s ease-in-out;
border-bottom: .1em solid #FDF7F8;
}
}
}
But am getting stuck in one place, how do I write the css prop for the navigationMenuList class selectors using the above hierarchy. Or do I need to fallback on the usual way of CSS for this
#sidebar .actionMenuList .topNavMenuList,
#sidebar .navigationMenuList .topNavMenuList {

Answer 1

You just do
#sidebar {
.navigationMenuList .topNavMenuList { }
}
all together
#sidebar {
.actionMenuList {
.topNavMenuList { ... }
}
.navigationMenuList {
.topNavMenuList { .... }
}
}
OR
assuming the rules are the same for both
#sidebar {
.actionMenuList,
.navigationMenuList {
.topNavMenuList {
-webkit-transition: background 0.3s ease-in-out;
border-bottom: .1em solid #FDF7F8;
}
}
}
you can even do
#sidebar {
.actionMenuList .topNavMenuList,
.navigationMenuList .topNavMenuList {
-webkit-transition: background 0.3s ease-in-out;
border-bottom: .1em solid #FDF7F8;
}
}
On a side note, if you ever get stuck at converting and need to make it work. Just leave the css in the less file and it will work like normal.

Answer 2

This works for me, and does what I expected.
#sidebar {
-webkit-transition: background 1.2s ease, padding 1.8s linear;
background: #3c3c3c;
.actionMenuList { margin-bottom: 20%; }
.actionMenuList .menuItem, .navigationMenuList .menuItem {
-webkit-transition: background .3s ease-in-out;
border-bottom: .1em solid #FDF7F8;
}
}