Repeat dots in LESS / SASS for Content property

Question

Take a look at below CSS styles and i\'m planning to use LESS & SASS for two different projects and is this possible in preprocessors.

.long         


        

Answer 1

LESS

Based on Seika85's answer, I've created a more generalized function for repeating an input arg with your choice of delimiter:

.repeater(@item, @count, @delimiter: " ", @iterated-item: "") when (@count = 1) {
  @return: ~'@{iterated-item}@{item}';
}
.repeater(@item, @count, @delimiter: " ", @iterated-item: "") when (@count > 1) {
  .repeater(@item, (@count - 1), @delimiter, ~'@{iterated-item}@{item}@{delimiter}');
}

Usage:

div {
  background-image: .repeater(url(foo.svg), 5, ", ")[];
}

Compiles to:

div {
  background-image: url(foo.svg), url(foo.svg), url(foo.svg), url(foo.svg), url(foo.svg);
}