Можете ли вы сделать JavaScript для цикла внутри LESS CSS? - PullRequest
Новая
       5

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

12 голосов
/ 29 августа 2011

Я ищу цикл for в Less.Возможно ли сделать это внутри Less?Я знаю, что он способен оценивать JS, но до такой степени?

Ответы [ 3 ]

24 голосов
/ 29 марта 2012

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

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

#grid {

    .core (@gridColumnWidth, @gridGutterWidth) {

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

      ...

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

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

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

Которые производят (среди прочего): 

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

in bootstrap.css line 170.

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

Убедитесь, что установлена ​​последняя версия компилятора узла lessc.

2 голосов
/ 29 августа 2011

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

@height: `doMyLoop()`

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

1 голос
/ 07 марта 2012

Это хак, но ... Добавьте это к вашему меньшему файлу. 

@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 и он должен работать.

...