1

Holla All , The Problem is that I want to implement some css style with a variable ( Animation Delay to specific ) on Generated Images That i don;t know their number I could do this with Jquery Yea Easy But What about doing it with Less Css

@iterations: ??;  This loop will work if I know the num of iterations

// helper class, will never show up in resulting css // will be called as long the index is above 0

.loopingClass (@index) when (@index > 0) {
// create the actual css selector, example will result in
// .myclass_30, .myclass_28, .... , .myclass_1
(~".myclass_@{index}") {
    // your resulting css
    my-property: -@index px;
}

// next iteration
.loopingClass(@index - 1);
}

// end the loop when index is 0

loopingClass (0) {}

// "call" the loopingClass the first time with highest value

.loopingClass (@iterations);

My question is there anyway to get the num of img using Less wo Using another thing and passing it to LESS

  • 1
    If you want to do it "wo Using another thing and passing it to LESS" then the answer is "NO." Remember, LESS is a preprocessor, implemented before load into the browser. You need to most likely use some type of server side script (php, etc.) to obtain the count, then feed that to LESS, then let LESS compile the CSS. You may be able to use javascript client side to get it if compiling the LESS dynamically with js client side also. – ScottS Apr 26 '13 at 09:24

1 Answers1

-1

Css doesn't have looping like that, so Less won't be able to do that.

You can style every other item differently, style the nth items, etc. Here's an example: http://css-tricks.com/how-nth-child-works/

NoBugs
  • 9,310
  • 13
  • 80
  • 146
  • 3
    CSS does not have looping, but LESS certainly does as the OP has indicated. I've been using it for many answers ever since discovering the technique and applying it first in this answer: http://stackoverflow.com/questions/13554978/less-mixin-or-selector-to-change-position-based-on-sibling-index/13555372#13555372. The issue here is the obtaining of the number of images dynamically and giving that information to LESS. – ScottS Apr 26 '13 at 09:19
  • Really? Does it compile a loop to a nth-item that css supports? – NoBugs Apr 26 '13 at 14:45
  • It acts similar to a "for" loop (only constructed differently) in that it can iterate from one number to another (either ascending or descending, depending on how it is constructed). It uses a recursive call to itself with the pattern matching of LESS mixins to perform the stop, with the "stop" being usually either a `0` (as the OP's example) or a variable set to the maximum value. – ScottS Apr 26 '13 at 15:51
  • @NoBugs It's not actually a loop , but it works like it It's called Parametric Mixins And Scott Explained it in details –  Apr 30 '13 at 00:50