Использование селектора общего назначения в качестве микса в LESS CSS

Я знаю о миксинах и параметрических миксинах. То, что мы ищем, - это способ сделать селекторами общего назначения в CSS/LESS в mixin.

Например, в Twitter BootStrap, здесь

.navbar .nav > li {
  float: left;
}

Если я должен использовать его в классе, скажите .mynavbar, я хочу, чтобы это сделать

INPUT->
.mynavbar {
  .navbar .nav >li;
}

OUTPUT->
.mynavbar {
  float:left;
}

Теперь я знаю, что это невозможно сделать с текущей версией LESS, поскольку компилятор помещает ошибку парсера. Я хотел, чтобы кто-то помог мне немного изменить исходный код less.js, чтобы он был работоспособен.

Мне удалось достичь исходного кода для парсинга mixin. Я попытался изменить RegExp там, но он мешает другим частям синтаксического анализатора. Я знаю, что мы должны сделать только несколько изменений, потому что вместо того, чтобы просто принимать .mixin и #mixin, мы должны принимать любые комбинации меток/тегов/атрибутов, такие как input[type=text].

В настоящее время это необходимо для разработки инфраструктуры пользовательского интерфейса, которая использует Bootstrap. К сожалению, многие места в бутстрапе усеяны прямыми селекторами тегов вместо ids и классов.

Ответы

Ответ 1

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

Проблема заключается не в сложности селектора, либо в дочернем правиле, а в роли селектора имен тегов (например, li). Итак, что мы должны исправить, это парсинг mixin, соответствующий только классам и идентификаторам. Думаю, нам не хотелось бы вмешиваться в первый класс или тест id, , поскольку это, вероятно, необходимо для того, чтобы отличать миксины от обычных правил CSS (хотя тесты выполняются нормально, и эта проверка прокомментирована). (На самом деле в действии есть предпочтение синтаксического анализатора, и единственное, что было пробовано после того, как mixins - это комментарии и директивы, поэтому мы также можем безопасно удалить эту проверку), Однако мы можем легко разрешить имена тегов в более поздних частях селектора mixin, добавив знак вопроса после [#.] в соответствующее регулярное выражение. Так

while (e = $(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)) {

- i. е. строка 825 - становится

while (e = $(/^[#.]?(?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)) {

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

Изменить: Для этой же проблемы существует проблема GitHub. По-видимому, тем меньше людей предпочитает, чтобы функция mixin была более узкой и функциональной, а не позволяла более гибко... хорошо... смешивать правила. Что касается вывода CSS, это, вероятно, разумно.

Ответ 2

Это возможно с версии 1.4.0 (2013-06-05), которая включает функцию extend. Исходный пример

.navbar .nav > li {
  float: left;
}

.mynavbar:extend(.navbar .nav > li) {}

компилируется в

.navbar .nav > li,
.mynavbar {
  float: left;
}

Документация здесь и обсуждение и пример использования для исходного вопроса здесь

EDIT: Добавлен пример кода