在 LESS / SASS 中为内容属性重复点

Question

看看下面的 CSS 样式，我计划将 LESS 和 SASS 用于两个不同的项目，这在preprocessors.

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

 

什么对你更有吸引力。

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

 

 
对于LESS，您需要更复杂的 mixin：

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