МЕНЬШИЙ синтаксис CSS, полезный для модернизации

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

#header {
  color: black;

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

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

.no-rgba {
  #header {}
  #footer {}
}

.no-js {
  #header {}
  #footer {}
}

Я попытался придумать решение, как вы этого хотели, но мне не повезло.