LESS CSS синтаксис полезен для модернизра

Question

Обычно я использую modernizr , чтобы выяснить возможности браузера.В то же время я использую МЕНЬШЕ CSS , чтобы сделать мой CSS более читабельным и понятным.Общий стиль, использующий вложенные правила LESS, выглядит следующим образом:

#header {
  color: black;

  .logo {
    width: 300px;
    color: rgba(255,255,255,.6);
    &:hover { text-decoration: none }
  }
}

Затем, если я использую откат в стиле modernizr, я добавлю этот текст для предыдущего блока:

.no-js #header,
.no-rgba #header {
  .logo {
    color: white;
  }
}

Итак, этоПохоже, у меня есть две ветви кода, и каждый раз, когда мне нужно проверить другой аспект совместимости, число веток будет расти.Этот код менее удобен в обслуживании, потому что вам нужно найти все стили, применяемые к каждому элементу, и польза, которую мы получаем от использования вложенных классов, исчезает.

Вопрос: есть ли способ в синтаксисе LESS включать такие запасные варианты и не запускать новую ветвь кода для .no-js и других классов .no-smth?

Answer 1

Теперь вы можете использовать оператор & для решения этой самой проблемы. Следующий синтаксис должен работать в less.js , lessphp и без точек :

b {
  a & {
    color: red;
  }
}

Это скомпилировано в:

a b { color:red; }

Итак, для данного примера вы можете использовать следующий синтаксис:

#header {
    .logo { color:white; }
    .no-rgba &,
    .no-js & {
        .logo { color:green; }
    }
}

... который будет скомпилирован в:

#header .logo {
    color:white;
}
.no-rgba #header .logo,
.no-js #header .logo {
    color:green;
}

Answer 2

Лучший способ подойти к этому - просто создать отдельный файл .less для этих откатов.Я думаю, что с этим будет намного легче справиться, поэтому вам не придется заглядывать за .no-rgba во многих местах.Мне не повезло.