How to Generate CSS with Loop in Less

How to generate CSS with loop in less

All, I found a way to output css in loop. pleae review it .thanks.

@iterations: 100;

// 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
    (~".span@{index}") {
        // your resulting css
        width: percentage((@index - 1) *0.01);
    }

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

Generate Classes Using Loop in Less

You can create a variable to store the size of the current margin:

.generate-margin(5);

.generate-margin(@n, @i: 1) when (@i =< @n) {

  @marginSize: @i*5;

  .mb-@{marginSize} {

    margin-bottom: (@i * 5px) !important;
  }
  .generate-margin(@n, (@i + 1));
}

Generate CSS classes from a list of values in LESS

It's more about your knowledge and understanding of existing language features rather than about language features themselves.

I.e. even in Less v2 (you're probably using) it's difficult to justify the existence of 4 extra lines of the .generate-detached(@colors...) mixin you have there.

E.g. why not:

@detached-colors: #f00 #0f0 #00f;

.detached-loop(@i: length(@detached-colors)) when (@i > 0) {
    .detached-loop(@i - 1);
    .detached-@{i} {
        @c: extract(@detached-colors, @i);
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
} .detached-loop;

Or:

.make-detached(#f00 #0f0 #00f);
.make-detached(@colors, @i: length(@colors)) when (@i > 0) {
    .make-detached(@colors, @i - 1);
    .detached-@{i} {
        @c: extract(@colors, @i);
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
}

?

---

Less v3 has each function:

each(#f00 #0f0 #00f, {
    .detached-@{index} {
        box-shadow: inset 0px 0px 8px 2px @value;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @value;
        }
    }
});

---

But the similar thing exists for Less v2 as a plugin:

.for-each(@c, @i in @l: #f00 #0f0 #00f) {
    .detached-@{i} {
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
}

LESS Mixin for loop

Looking at the docs I'd say it would look like:

.foo(4);

.foo(@n, @i: 1) when (@i =< @n) {
  &:nth-child(@{i}) {
    .animation-delay(100ms + (@i * 20));
  }
  .foo(@n, (@i + 1));
}

Tested with LESS2CSS using animation-delay property instead of your function:

.foo(4);

.foo(@n, @i: 1) when (@i =< @n) {
  &:nth-child(@{i}) {
    animation-delay: (100ms + (@i * 20));
  }
  .foo(@n, (@i + 1));
}

Generates:

:nth-child(1) {
  animation-delay: 120ms;
}
:nth-child(2) {
  animation-delay: 140ms;
}
:nth-child(3) {
  animation-delay: 160ms;
}
:nth-child(4) {
  animation-delay: 180ms;
}

How can I use a loop in LESS to create specific class names for typography?

An example from documentation for further modification;)
for more complicated code, it is better to use scss than less

.for(@list, @code) {
  & {
    .loop(@i: 1) when (@i =< length(@list)) {
      @value: extract(@list, @i);
      @code();
      .loop(@i + 1);
    }
    .loop();
  }
}

@elements: small, caption, body, subheader, title, headline;

.for(@elements, {
  @remfont: @i+1;
  @remline: ((@i+1) * 1.5 / 3);
  .@{value} {
    font-size: ~"@{remfont}rem";
    line-height: ~"@{remline}rem";
  }
});

CSS LESS - add variable in loop

You could move the colors into an array then fetch by index, e.g:

@colors: 'color-item-1' #f00, 'color-item-2' #0f0, 'color-item-3' #00f;

.generate-item(3);

.generate-item(@n, @i: 1) when (@i =< @n) {
    .item@{i} {
        color: extract(extract(@colors, @i),2);
      }
   .generate-item(@n, (@i + 1));
}

Consuming Less Vars in a generating for loop

Why not use variable variables ?

@spacing-xsmall: .25rem; // 4px
@spacing-small: .5rem; // 8px
@spacing-medium: 1rem; // 16px
@spacing-medium-large: 1.5rem; // 24px
@spacing-large: 2rem; // 32px
@spacing-xlarge: 2.5rem; // 40px
@spacing-xxlarge: 4rem; // 64px

@sizes: xsmall, small, medium, medium-large, large, xlarge, xxlarge;

.init-spacing(@i) when (@i > 0) {
  
  @size: extract(@sizes, @i);
  @space: ~"spacing-@{size}";
  
  .margin-@{size} { margin: @@space }

  .padding-@{size} { padding: @@space; }
  
  .init-spacing(@i - 1);
}

.init-spacing(length(@sizes));

I got (with a preview)

.margin-xxlarge {
  margin: 4rem;
}
.padding-xxlarge {
  padding: 4rem;
}
.margin-xlarge {
  margin: 2.5rem;
}
.padding-xlarge {
  padding: 2.5rem;
}
.margin-large {
  margin: 2rem;
}
.padding-large {
  padding: 2rem;
}
.margin-medium-large {
  margin: 1.5rem;
}
.padding-medium-large {
  padding: 1.5rem;
}
.margin-medium {
  margin: 1rem;
}
.padding-medium {
  padding: 1rem;
}
.margin-small {
  margin: 0.5rem;
}
.padding-small {
  padding: 0.5rem;
}
.margin-xsmall {
  margin: 0.25rem;
}
.padding-xsmall {
  padding: 0.25rem;
}

Can you do a javascript for loop inside of LESS css?

I will recommend to checkout Twitter Bootsrap. They are building their grid system that way. They loop, with recursion, in a less mixin, instead of typing every class they need.

The interesting part is in mixins.less file, in the less directory, below "// The Grid" comment (line 516). The interesting portion is:

#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));
      }
 ...

Which is called in grid.less file in less directory this way:

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

Which produce (among other things):

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

in bootstrap.css line 170.

For @gridColumnWidth, @gridGutterWidth and the rest of variables check variables.less file (line 184)

Be sure to have the last version of lessc node compiler installed.

---

Related Topics