css - 在 LESS/SASS 中为 Content 属性重复点

Question

看看下面的 CSS 样式，我打算将 LESS 和 SASS 用于两个不同的元素，这是否可行:

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

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

我想避免重复点；把它作为一个点，它也应该是可配置的；将其更改为 -, #, *

像下面这样的mixin。

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

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

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

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

Answer 1

我在 SASS 中做了一个 mixin，在 LESS 中我认为你可以做类似的事情。点或破折号等字符必须放在引号之间。

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)
}

输出

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

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

.letter {
  content: "xx";
}

或者你也可以做一个函数:

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)
}

输出

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

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

---

---

在 LESS 中没有 for 句子，我找不到一个干净的方法来做，但这段代码有效(输出很脏):

少

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

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

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

输出

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