Перегрузка загрузочной переменной с МЕНЬШЕ

Я расследую весь день, поскольку считаю, что стоит потратить некоторое время на изучение передовой практики для настройки Bootstrap.

Я вижу, что есть доступная страница для выборочной настройки элементов http://twitter.github.io/bootstrap/customize.html, но я хочу иметь больше контроля, чем это, не касаясь исходных исходных файлов начальной загрузки.

Для начала я хотел протестировать изменение сетки от 12 до 16 столбцов, и для этого я создал свою собственную переменную меньше файла и добавил @gridColumns: 16; только в этот файл и импортировал этот обычай меньше внутри bootstrap.less, как показано ниже.

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

Затем, используя WinLess, я скомпилировал файл bootstrap.less, чтобы получить новый bootstrap.css с вызовом с переопределенной переменной import и связал css с html файлом, но сетка не изменится на 16 столбцов.

Кто-нибудь может указать, что я делаю неправильно?

Ответы

Ответ 1

Я работаю над аналогичным проектом, где у нас есть загрузочный файл в "стороннем" месте, а затем переопределяет только mixins.less и variables.less. Образец, который мы используем для этого, добавляет три файла и не прикасается к начальной загрузке (позволяет легко сбрасывать замены):

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

файл mixins

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

файл переменных, в котором вы будете переопределять сетки

/*
 *    /style/shared/variables.less
 */

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // let pretend this is your site-specific override

Файл, который фактически импортирован (или передан менее компилятору):

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

в моей установке, если я это сделаю, я получаю файл css с некоторыми странными значениями .span15 (так как я не обновлял @gridColumnWidth или @gridGutterWidth, но значения .row-fluid фактически срабатывали именно так вы ожидаете их, поскольку они рассчитаны простым делением).

Мне нравится эта настройка, потому что я могу cd в bootstrap-master и git pull и получать новые обновления без необходимости слияния каких-либо из моих конкретных kludges (это также дает мне хорошую ручку того, что я действительно переопределил)

Другое дело, что очень ясно, что shared.less использует только grid.less(а не весь bootstrap). Это преднамеренно, так как в большинстве случаев вам не нужен весь бутстрап, а всего лишь несколько его частей. По меньшей мере, большинство загрузочных файлов меньше, так как их единственные жесткие зависимости: shared.less и mixins.less

если это все еще не работает, возможно, WinLess запутывается

Ответ 2

Переопределение переменных после импорта оригинала bootstrap.less отлично работает для меня:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

Компиляция вышеуказанных LESS-источников выводит правильно настроенный CSS-код Bootstrap.

Релевантная информация: http://lesscss.org/features/#variables-feature-lazy-loading

Ответ 3

Другой пример, который может кому-то помочь:

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';