Ссылка на класс /mixin без полного импорта файла LESS

Я использую тему корней для wordpress: https://github.com/retlehs/roots/

Он уже поставляется с предварительно скомпилированным bootstrap.css и рекомендует использовать app.css для любых настроек. Поскольку у меня нет возможности добавлять классы к кнопкам через html или javascript, я бы хотел использовать источники LESS для ссылки на класс css, например, я хочу дать кнопке submit стиль кнопки начальной загрузки:

input#submit{
.btn;
.btn-primary;
}

Если я использую @import 'bootstrap.less';, он добавляет весь bootstrap css в app.css. Как я могу просто использовать bootstrap.less в качестве ссылки для компиляции?

Ответы

Ответ 1

Основной вопрос, который вы задаете,

"Как я могу просто использовать bootstrap.less в качестве ссылки для компиляции?"

Начиная с версии LESS версии 1.5

Для LESS 1.5 теперь можно импортировать файл исключительно как ссылку. Например:

@import (reference) 'bootstrap.less';

Никакой фактический код не будет выводиться из этого файла как CSS, но все становится доступным для использования в качестве mixins.

Оригинальный ответ (хранится для контекста для всех комментариев)

[ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: неясно, будет ли это работать с 1.3.3, но этот оригинальный ответ, который я действительно верю, имеет некоторую полезность и в более поздних версиях. Однако для того, чтобы действительно получить то, что требовалось OP, рекомендуется новая возможность в LESS 1.5.]

Текущие версии LESS (1.3.3) могут соответствовать этому с помощью пространства имен. Например:

#bootstrapRef() {
  @import: 'bootstrap.less':
}

input#submit{
  #bootstrapRef > .btn;
  #bootstrapRef > .btn-primary;
}

Сделав пространство имен mixin (добавление скобок после имени), оно все равно будет импортировать файл (я не знаю, как получить доступ к нему извне, не импортируя его), но он не должен компилировать фактический код начальной загрузки в ваш окончательный вывод файла css. То, что этот метод должен сделать, - это доступ к классам начальной загрузки, mixins и т.д. Через вызов пространства имен #bootstrapRef >, что позволяет использовать их в ваших собственных определенных классах и т.д.

Я не тестировал полностью, если есть какие-то ошибки, он должен просто теоретически работать.

Ответ 2

Выполнение этого в LESS немного сложно, но может быть достигнуто так:

#bootstrap() {
    .btn() {
        @import "bootstrap/variables.less";
        @import "bootstrap/mixins.less";
        @import "bootstrap/buttons.less";
    }
}

input#submit{
  #bootstrap > .btn;
}

в результате чего некоторые дополнительные классы объявляются из mixins.less и variables.less. В основном только .clearfix, а затем все классы .btn добавляются в input#submit

Смотрите длинный вывод здесь:

http://pastebin.com/ZBAZZ3kS

Ответ 3

Я не уверен, есть ли инструмент для импорта только текущих ссылок CSS правил внутри внешнего файла, но Boostrap имеет очень организованную структуру, поэтому проверьте, находятся ли стили, которые вы ищете, на mixins.less, поэтому вы не нужно импортировать весь файл bootstrap.less.

Кроме того, проверьте этот вопрос, есть несколько хороших рекомендаций для настройки Boostrap.

РЕДАКТИРОВАТЬ: Как полагает ПавлоМихалов, возможно, лучше посмотреть buttons.less

Примечание: Это будет потрясающий инструмент для подобных вещей. Когда-нибудь я буду работать над этим

Ответ 4

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

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

Я только что зарегистрировал запрос функции в разделе LESS, не знаю наверняка, если это было запрошено до этого, но искал и ничего не нашел, надеюсь, что мне не удастся повторить повторение!

https://github.com/cloudhead/less.js/issues/1169

UPDATE Проблемы оказались дублирующими, проблема открыта здесь: https://github.com/cloudhead/less.js/issues/622