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

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: "." "." "." "." ".";
}