Repeat dots in LESS / SASS for Content property

Issue

Take a look at below CSS styles and I'm planning to use LESS & SASS for two different projects and is this possible:

.longDots {
  content: "  ......................................................................................................";
}

.shortDots {
  content: "....................";
}

I want to avoid repeated dots; to have it as single dot and that too should be configurable; to change it as -, #, *

Something mixin like below.

 .longDots {
    content: repeater('.', 25);
}

.shortDots {
    content: repeater('.', 10);
}

.longDashes {
    content: repeater('-', 25);
}

.shortDashes {
    content: repeater('-', 10);
}

Solution

I do a mixin in SASS, in LESS I think you can do something similar. Some characthers like points or dashes must be between quotation marks.

SASS

@mixin repeat($character, $n){
  $c:"";
  @for $i from 1 through $n {
    $c: $c + $character;
 }
   content: $c;
}

.dash{
  @include repeat("-", 4)
}

.dot{
  @include repeat(".", 6)
}

.letter{
  @include repeat(x, 2)
}

OUTPUT

.dash {
  content: "----";
}

.dot {
  content: "......";
}

.letter {
  content: "xx";
}

Or you can do also a function:

SASS

@function repeat($character, $n){
  $c:"";
  @for $i from 1 through $n {
    $c: $c + $character;
 }
    @return $c;
}

.dash{
  content: repeat("-", 4)
}

.dot{
  content: repeat(".", 6)
}

OUTPUT

.dash {
  content: "----";
}

.dot {
  content: "......";
}

---

---

In LESS there isn't for sentences and I can't found a clean way to do but this code works (the output is quite dirty):

LESS

.repeat(@char, @i) when (@i> 0) {
   .repeat(@char, (@i - 1)); 
  content+_:"@{char}";
}

.dash {
  .repeat("-" ,3);
}

.dot {
  .repeat("." ,5);
}

OUTPUT

.dash {
  content: "-" "-" "-";
}
.dot {
  content: "." "." "." "." ".";
}

Answered By - user4994625