在 LESS / SASS for 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 中做一个混音，在 LESS 中我认为你可以做类似的事情。一些字符(如点或破折号(必须在引号之间。

萨斯

@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";
}

或者你也可以做一个功能：

萨斯

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

Answer 2

你可以做这样的事情：

萨斯

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

 

mixin也可以这样写：

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

或：

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

或：

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

 

无论什么对你更有吸引力。

如果您没有 lokal 工具，您可以随时在线测试 SASS 的小部分，例如 http://sass.js.org/或 http://www.sassmeister.com/。

 

---

 
对于更少，您需要更复杂的混合：

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

第一个 mixin 是 if 语句，第二个是实际循环。使用这两个单独的 mixin 很重要，因为只有中继器 mixin 才会为每次迭代生成大量content属性，不幸的是，最短的属性在底部。

经 http://less2css.org/测试。(它使用 LESS 版本 1.3.3 及更高版本成功编译。

 

---

---

 
由于OP更新了他的问题：

萨斯

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

通过"#{$string}"，我只是向您展示另一种访问变量内容的方法。您也可以只使用 $string .我之前向您展示的每个混音一旦您将其转换为功能，就像我在这里所做的那样，就会起作用。

少

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

Answer 3

LESS

根据 Seika85 的答案，我创建了一个更通用的函数，用于使用您选择的分隔符重复输入参数：

.repeater(@item, @count, @delimiter: " ", @iterated-item: "") when (@count = 1) {
  @return: ~'@{iterated-item}@{item}';
}
.repeater(@item, @count, @delimiter: " ", @iterated-item: "") when (@count > 1) {
  .repeater(@item, (@count - 1), @delimiter, ~'@{iterated-item}@{item}@{delimiter}');
}

用法：

div {
  background-image: .repeater(url(foo.svg), 5, ", ")[];
}

编译为：

div {
  background-image: url(foo.svg), url(foo.svg), url(foo.svg), url(foo.svg), url(foo.svg);
}