Alamelu Dilli Alamelu Dilli - 4 months ago 28
Less Question

Repeat dots in LESS / SASS for Content property

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
.

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

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



What exactly, I want to do to avoid repeated dots to have it as single dot and that too 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);
}

Answer

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