Как настроить Twitter Bootstrap CSS с помощью переменных LESSCSS?

Я пытаюсь настроить Twitter Bootstrap CSS без изменения локальных копий кода начальной загрузки. * Поэтому я клонировал проект Twitter Bootstrap в одну папку и имел код приложения в своей собственной папке:

/html
    /bootstrap
       ...etc...
       /js
       /less
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

В моем файле style.less я определяю несколько LESS-переменных, затем включаю файлы начальной загрузки:

/* custom settings that deviate from Bootstrap default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

Так как переменные LESSCSS действительно являются константами, я удивлен, что мой @sansFontFamily не получает, когда я компилирую файлы LESS в CSS: lessc style.less > MyApp.css --yui-compress

Итак... что мне не хватает? Почему мои переменные заменяются переменными, определенными в файлах LAST Bootstrap?

* - Я проверил " "Рекомендации по настройке бутстрапа Twitter" , но подумать, что использование констант было бы лучшим подходом (если я могу получить его работа).

Ответы

Ответ 1

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

Если вы используете Bootstrap версии 2.x:

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

/* custom settings that deviate from Bootstrap default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

Если вы используете Bootstrap версии 3.x:

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";

/* custom settings that deviate from Bootstrap default values */
@font-family-sans-serif: Trebuchet MS, Tahoma, sans-serif, Arial;
@font-size-base: 11px;
@line-height-base: 18px;

Полный список переменных можно найти в файле variables.less.

Ответ 2

Совет PeterVR для перемещения объявлений пользовательских переменных ниже инструкций бутстрапа @import корректен в соответствии с документами здесь http://lesscss.org/#-variables. Это означает:

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

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

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

.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

(образец кода отредактирован - есть пара опечаток в их версии!)

Итак, я бы предположил, что последовательность компиляции выглядит примерно так:

  • Обработать все @imports для создания одного фрагмента кода LESS
  • Пройдите через код LESS и соберите все объявления переменных (по блоку области)
  • Любое значение объявления переменной заменяет любой предыдущий экземпляр с тем же именем (для каждого блока)
  • Замените переменные-заполнители значениями переменных

Это объясняет, почему значение .class1 .class { three: равно 3, хотя оно было объявлено перед объявлением @var: 3;.

Ответ 3

Привет, я получил лучший способ от случайного поиска в Интернете

http://ollomedia.com/using-twitter-bootstrap-the-right-way/

Пример исходного кода, пожалуйста, скачайте и просмотрите

http://ollomedia.com/wp-content/uploads/sample.zip

Ответ 4

Я сделал что-то подобное недавно, и лучшим подходом, который я нашел, было создание моего собственного "variables_override.less" и импорт этого после импорта стандартных переменных .less в bootstrap.less и responsive.less. Затем скомпилируйте оба файла как обычно, и ваши переменные переопределяют значения по умолчанию для начальной загрузки

Этот подход подразумевает модификацию bootsrap.less и responsive.less, но очень минимальным образом