Как преобразовать эти вложенные селектора в LESS?

Question

Я новичок в LESS CSS, но я потратил много времени на изучение CSS. В настоящее время я переношу свой CSS-код в LESS для изучения и улучшения себя. Я наткнулся на это, когда я делаю процесс миграции,

Existing CSS код

#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; 
} 

Дать этот МЕНЬШЕ код

#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; 
     } 
    } 
} 

Но я застрял в одном месте, как я могу написать css prop для селекторов классов navigationMenuList, используя указанную выше иерархию. Или мне нужно Откат на обычном пути CSS для этого

#sidebar .actionMenuList .topNavMenuList, 
#sidebar .navigationMenuList .topNavMenuList { 

Answer 1

Вы просто делаете

#sidebar { 
    .navigationMenuList .topNavMenuList { }  
} 

все вместе

#sidebar {  
    .actionMenuList { 
     .topNavMenuList { ... } 
    } 
    .navigationMenuList { 
     .topNavMenuList { .... } 
    } 
} 

ИЛИ

предполагая правила являются то же для обоих

#sidebar { 
    .actionMenuList, 
    .navigationMenuList { 
     .topNavMenuList { 
      -webkit-transition: background 0.3s ease-in-out; 
      border-bottom: .1em solid #FDF7F8; 
     } 
    } 
} 

вы даже можете сделать

#sidebar { 
    .actionMenuList .topNavMenuList, 
    .navigationMenuList .topNavMenuList { 
     -webkit-transition: background 0.3s ease-in-out; 
     border-bottom: .1em solid #FDF7F8; 
    } 
} 

На стороне записки, если вы когда-нибудь застрять в преобразовании и нужно сделать его работу. Просто оставьте css в файле меньше, и он будет работать как обычно.

Answer 2

Это работает для меня и делает то, что я ожидал.

#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; 
    } 
}