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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.