Меньше v2 не компилирует Twitter Bootstrap 2.x

При компиляции Twitter Bootstrap 2.3.2. с Less 2 я обнаружил следующую ошибку:

NameError: #grid > .core > .span is undefined in /home/bootstrap-2.3.2/less/navbar.less on line 199, column 3:
198 .navbar-fixed-bottom .container {
199   #grid > .core > .span(@gridColumns);
200 }

Как я могу это исправить?

Ответ 1

В файле less/navbar.less:

Заменить:

.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  #grid > .core > .span(@gridColumns);
}

.navbar-static-top .container,  
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { 
width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1));
}

См. также: Переопределение определений классов с Менее

Ответ 2

Мне удалось избежать ошибки без изменения файлов Bootstrap, создав новый mixin, который загружается после микширования Bootstrap:

#grid {
    .core  {
        .span(@gridColumns) {
            width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1));
        }
    }
};

Это было лучше для нас, поскольку мы избегаем исправления пакетов Contrib.

Ответ 3

Нет необходимости редактировать стиль.

Просто npm install [email protected] и у вас будет локальная (внутри вашей папки) копия последней версии v1, которая правильно скомпилирует bootstrap v2.3.2, если вы запустите node_modules/less/bin/lessc source.less output.css.

Ответ 4

Вот патч, который должен сделать это для v2.0.3 загрузчика и lessc 3.10.3:

--- a/bootstrap/less/mixins.less
+++ b/bootstrap/less/mixins.less
@@ -530,16 +530,16 @@
 // The Grid
 #grid {

-  .core (@gridColumnWidth, @gridGutterWidth) {
+  .core (@gridColumnWidth: @gridColumnWidth, @gridGutterWidth: @gutterColumnWidth) {

     .spanX (@index) when (@index > 0) {
-      (~"[email protected]{index}") { .span(@index); }
+      [email protected]{index} { .span(@index); }
       .spanX(@index - 1);
     }
     .spanX (0) {}

     .offsetX (@index) when (@index > 0) {
-      (~"[email protected]{index}") { .offset(@index); }
+      [email protected]{index} { .offset(@index); }
       .offsetX(@index - 1);
     }
     .offsetX (0) {}
@@ -576,7 +576,7 @@
   .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

     .spanX (@index) when (@index > 0) {
-      (~"[email protected]{index}") { .span(@index); }
+      [email protected]{index} { .span(@index); }
       .spanX(@index - 1);
     }
     .spanX (0) {}
@@ -608,7 +608,7 @@
   .input(@gridColumnWidth, @gridGutterWidth) {

     .spanX (@index) when (@index > 0) {
-      (~"[email protected]{index}, [email protected]{index}, [email protected]{index}") { .span(@index); }
+      [email protected]{index}, [email protected]{index}, [email protected]{index} { .span(@index); }
       .spanX(@index - 1);
     }
     .spanX (0) {}