Какие ресурсы необходимы для компиляции bootstrap.css из bootstrap.less?

Для проекта, над которым я работаю, я хотел использовать настроенную версию Bootstrap. Поигравшись с ним, мне стало совершенно ясно, как работает Bootstrap. Существует центральный файл .less, bootstrap.less, который объединяется со всеми другими файлами .less, выполняя определенные задачи. Я планировал адаптировать bootstrap.less и variables.less, чего было бы достаточно для моей цели.

Итак, я загрузил полную папку less репозитория twitter bootstrap git по адресу https://github.com/twbs/bootstrap/tree/master/less

и я установил less.app для Mac OS X, установил, что все файлы Bootstrap будут отслеживаться, и только bootstrap.css будет перекомпилироваться каждый раз, когда я изменяю любой файл .less. До этого момента я не менял ни один из файлов, но перекомпилировал bootstrap.less, что дало мне новый bootstrap.css

Теперь моя проблема в том, что недавно скомпилированный bootstrap.css (скомпилированный из неизмененных файлов, загруженных из репозитория bootstrap git) выглядит совершенно иначе, чем bootstrap.css, который поставляется с загрузкой начальной загрузки, и также ведет себя иначе.

Загружаемый файл bootstrap.css запускается следующим образом:

/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

.clearfix {
  *zoom: 1;
}

.clearfix:before,

и те же 15 строк в bootstrap.css, скомпилированные из неизмененного bootstrap.less, выглядят так:

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

bootstrap.less выглядит так (только первые 15 строк):

// 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";

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

  • Должна ли компиляция работать так, как я описываю?
  • Есть ли какие-то важные ресурсы, которые я пропустил?

Буду рада за каждую маленькую подсказку, которая поможет найти решение этой проблемы ...


person marue    schedule 27.10.2013    source источник
comment
Вы просто сравниваете разные версии начальной загрузки. У вас bootstrap.css версии 2.3.1 и github.com/twbs/bootstrap/tree/ master / less - это v3.0.x.   -  person seven-phases-max    schedule 28.10.2013
comment
Что касается этого большого заголовка комментария: он не включен ни в какие файлы less, но добавлен теми скриптами сборки, которые они используют (recess и т. д ...)   -  person seven-phases-max    schedule 28.10.2013
comment
И еще одна проблема - кажется, что less.app поставляется с ОЧЕНЬ старой версией less, поэтому он может в конечном итоге не правильно скомпилировать последние файлы начальной загрузки (поскольку они действительно используют несколько современных функций less здесь и там). Если у less.app есть какая-то функция автоматического обновления, которая может загружать и устанавливать последнюю версию less.js, на которой он построен.   -  person seven-phases-max    schedule 28.10.2013
comment
Используйте файлы less из 2.3.1 сейчас, тезисы хорошо работают с less.app. Компилятор less из less.app использует меньше 1.3, что несовместимо с новейшей версией начальной загрузки.   -  person marue    schedule 28.10.2013
comment
@ seven-phase-max: опубликуйте это как ответ, и я приму это.   -  person marue    schedule 28.10.2013
comment
Ах, меня здесь устраивает. Я рад, что смог помочь.   -  person seven-phases-max    schedule 28.10.2013


Ответы (1)


Вам просто нужен компилятор, который прочитает имеющийся у вас код .less и преобразует его в .css. Я лично рекомендую SimpLESS. Они предлагают компилятор, который может делать именно то, что вы ищете, включая возможность перетаскивания папки проекта.

Обновление:

Они предлагают css-minification, компиляцию на лету, обратный синтаксический анализ @import, отображение синтаксических ошибок, кроссбраузерный css-префикс, автоматическое сокращение количества обновлений, готовые уведомления и работает с Twitter Bootstrap.

person PatchGuru    schedule 27.10.2013
comment
Less.app - это компилятор. Я ищу причину, по которой он не создает тот же файл bootstrap.css, который предоставляется Twitter. - person marue; 28.10.2013