Можете ли вы сделать javascript для цикла внутри LESS css?

Ответ 1

Я рекомендую проверить Twitter Bootsrap. Таким образом они строят свою сетку. Они петли, с рекурсией, в меньшем микшировании, вместо того, чтобы печатать каждый класс, в котором они нуждаются.

Интересная часть находится в файле mixins.less, в меньшей директории, ниже комментария "//The Grid" (строка 516). Интересная часть:

#grid {

    .core (@gridColumnWidth, @gridGutterWidth) {

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

      ...

      .span (@columns) {
        width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
      }
 ...

который вызывается в файле grid.less в меньшей директории следующим образом:

#grid > .core(@gridColumnWidth, @gridGutterWidth);

Что производит (между прочим):

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
...

в bootstrap.css строка 170.

Для @gridColumnWidth, @gridGutterWidth и остальных переменных проверяем файл variables.less(строка 184)

Обязательно установите последнюю версию компилятора lessc node.

Ответ 2

Нет ничего о циклах в документах, но поскольку вы можете обращаться к выражениям JavaScript через обратные ссылки, вы всегда можете определить функцию в своем script (не ваш код LESS, но JavaScript — например, если в браузере у вас будет отдельный элемент script), который будет выполнять ваш цикл, а затем получить к нему доступ, например:

@height: `doMyLoop()`

Это зависит от того, чего вы пытаетесь достичь с помощью цикла. Если вы хотите, чтобы цикл выводил правила CSS, я подозреваю, что вам не повезло.

Ответ 3

Это взломать, но... Добавьте это в свой файл меньше.

@testColor: green;

unusedclass {
    unknownprop: ~`loopCss(10,".group{{i}} { background-color: @{testColor}; }")`
}

Создайте файл javascript loopCss.js со следующей функцией:

function loopCss(count,cssTemplate) {
    // end the existing unused class
    var result = "0;}\n";
    // Add your custom css
    for(var i=0; i<count; i++) result += cssTemplate.replace("{{i}}",i) +"\n";
    // Handle the close bracket from unused class
    result += "unusedclass {";
    return result;
}

Теперь включите loopCss.js перед вашим less.js, и он должен работать.