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

Answer 2

你可以这样做：

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

 

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

 

任何更吸引你的东西。

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

 

---

 
对于 LESS，您需要更复杂的 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);
}

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

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

 

---

---

 
自从 OP 更新了他的问题：

SASS

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

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

对于"#{$string}"，我只是向您展示了另一种访问变量内容的方法。您也可以只使用$string。我之前向您展示的每个 mixin 在您按照我在这里所做的方式将其转换为函数后都可以正常工作。

少

.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

少

基于 Seika85's answer，我创建了一个更通用的函数，用于使用您选择的分隔符重复输入 arg：

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