Амперсанд в 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

Да, это использование & поддерживается в 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;
}

Answer 2

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

Для > (дочерний селектор), см .: Less.js - строгие вложенные правила?

См .: http://tinkerbin.com/H3wUpFMj (измените формат CSS на «Less», затем нажмите «Run»)

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

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