Амперсанд в Less.js по сравнению с SCSS

Question

Я собирался переключиться с SCSS на Less.js, но я не могу найти одну функциональность, которую я использовал для использования с SCSS.

#nav { 
    li a { 
    color: maroon; 

    body.admin & {background-color: #eee;} 
    } 
} 

Здесь говорится, что определяет, что #nav li a в контексте body.admin будет иметь серый фон.

#nav { 
    &>li { 
    ... 
    } 
} 

соответствует #nav>li {...}.

Это не возможно с less.js?

Answer 1

Я не думаю, что вы можете сделать body.admin & вещь с МЕНЬШЕ. Наверное, это не плохо, потому что это сбивает с толку.

Для > (селектор ребенка), см: Less.js - strong nested rules?

См:http://tinkerbin.com/H3wUpFMj(изменить формат CSS, чтобы "меньше", а затем нажмите кнопку "Выполнить")

Это так просто как это:

.A { 
    > .B { 
     width: 50px; 
    } 
} 

Answer 2

Да, это использование & - supported in LESS.

Вы можете увидеть это, если вы вводите свой пример в http://less2css.org:

МЕНЬШЕ Вход:

#nav { 
    li a { 
    color: maroon; 

    body.admin & {background-color: #eee;} 
    } 
} 

CSS Вывод:

#nav li a { 
    color: maroon; 
} 
body.admin #nav li a { 
    background-color: #eee; 
}