Требуется ли это для использования миксинов Bootstrap?

Я новичок в LESS и Bootstrap, и меня смущает результат моего файла css.

Моя основная цель — использовать примеси и переменные в начальной загрузке в моих собственных файлах css.

Насколько я понимаю, процесс будет заключаться в том, чтобы получить меньше файлов, импортировать их в проект и import загрузочную ссылку. Итак, на данный момент я могу использовать примеси в своем собственном файле css.

Пример:

@import "less/bootstrap.less";

.myRow{
    .make-row();
}

Однако теперь у меня есть 7400+ строк стилей в myCustomStyles.css. Это правильно"? Я не понимаю, почему он на самом деле импортирует все стили. Насколько я понимаю... у меня есть ссылка на bootstrap.min.css CDN или локальный. Затем myCustomStyles.css будет включен ПОСЛЕ этого и переопределит значения по умолчанию.

Думаю, я запутался в том, как мне воспользоваться преимуществами CDN и по-прежнему использовать миксины и переменные в начальной загрузке?

Я использовал следующие две статьи в качестве ссылки:

http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web


twitter-bootstrap asp.net-mvc less asp.net-mvc-5 twitter-bootstrap-3
person MisterIsaak    schedule 03.12.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Bootstrap.less — это полная реализация начальной загрузки. В нем будут все переменные и примеси для создания всего CSS для начальной загрузки. Если вы этого не хотите, вам, вероятно, следует выбирать, какие файлы LESS включать вместо этого. Вероятно, вам нужны переменные и примеси, так что вы могли бы обойтись только импортом переменных.less и mixins.less?

Если вы посмотрите на bootstrap.less, это выглядит так:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// snip...

Это не что иное, как куча импортов в другие файлы .less. Каждый файл специфичен для того, что он делает. Как минимум, я думаю, вам понадобятся переменные и, возможно, миксины. Normalize выполняет сброс CSS. Grid определяет классы сетки и т. д.

person Dismissile    schedule 03.12.2013
comment
Вау, я чувствую себя немного глупо сейчас. Могу ли я со ссылкой, скажем, на CDN-версию boostrap, за которой следуют мои собственные стили, которые изменяют значения переменных и используют миксины? - person MisterIsaak; 03.12.2013
comment
Я так думаю. Вы также можете просто скачать файлы самостоятельно и поместить их в свой проект. Каким бы способом вы ни хотели это сделать, это должно сработать. - person Dismissile; 03.12.2013

arrow_upward
3
arrow_downward

Возможно, начиная с версии МЕНЬШЕ 1.5

Вы можете указать, что вам нужен код только в качестве ссылки, например:

@import (reference) "less/bootstrap.less";

.myRow{
    .make-row();
}

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

person ScottS    schedule 03.12.2013
comment
Это довольно интересная ошибка в поведении (дублирование), и странно, что она считала это необъявленным миксином, но все же работала как миксин. - person ScottS; 03.12.2013