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

You could do something like:

SASS

@mixin repeater($item, $count) {
    $string: "";
    @for $i from 1 through $count {
        $string: $string + $item;
    }
    content: $string;
}

.longDots {
    @include repeater('.', 25);
}

.shortDots {
    @include repeater('.', 10);
}

.longDashes {
    @include repeater('-', 25);
}

.shortDashes {
    @include repeater('-', 10);
}

 

The mixin could also be written like:

@mixin repeater($item, $count) {
    $string: "";
    @for $i from 1 through $count {
        $string: str-insert($string, $item, $i - 1);
    }
    content: $string;
}

or:

@mixin repeater($item, $count) {
    $string: "";
    @while $count > 0 {
        $string: $string + $item;
        $count: $count - 1;
    }
    content: $string;
}

or:

@mixin repeater($item, $count) {
    $string: "";
    @while $count > 0 {
        $string: str-insert($string, $item, $count);
        $count: $count - 1;
    }
    content: $string;
}

 

Whatever appeals more to you.

You can always test your small parts of SASS online at e.g. http://sass.js.org/ or http://www.sassmeister.com/, if you don't have lokal tools for that.

 

---

 
For LESS you need a little bit more complex mixins:

.contentresult(@string, @count) when (@count = 1) {
    content: @string
}

.repeater(@item, @count, @string: "") when (@count > 0) {
    .repeater(@item, (@count - 1), "@{string}@{item}");
    .contentresult("@{string}@{item}", @count);
}

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

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

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

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

The first mixin is an if-statement, the second one is the actual loop. It's important to use these two separate mixins, because only the repeater mixin would produce a lot of content properties for each iteration with the shortest at the bottom unfortunately.

Tested with http://less2css.org/. (It compiles successfully with LESS version 1.3.3 and later.)

 

---

---

 
Since OP updated his question:

SASS

@function repeater($item, $count) {
    $string: "";
    @for $i from 1 through $count {
        $string: $string + $item;
    }
    @return "#{$string}";
}

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

With "#{$string}" I'm just showing you another way of accessing the content of a variable. You could also just use $string. Every mixin I showed you earlier is working once you turn it into a function the way I did here.

LESS

.contentresult(@string, @count) when (@count = 1) {
    @return: @string
}

.repeater(@item, @count, @string: "") when (@count > 0) {
    .repeater(@item, (@count - 1), "@{string}@{item}");
    .contentresult("@{string}@{item}", @count);
}

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