在LESS/SASS中为内容属性重复点 [英] Repeat dots in LESS / SASS for Content property

问题描述

看看下面的CSS样式，我打算使用LESS& SASS可用于两个不同的项目，并且可以在preprocessors中使用.

Take a look at below CSS styles and i'm planning to use LESS & SASS for two different projects and is this possible in preprocessors.

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

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

确切地说，我想避免重复的点将其作为单个点，并且太可配置而无法将其更改为-, #, *

类似mixin的东西.

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

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

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

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

推荐答案

我在SASS中进行mixin，在较少的情况下，我认为您可以执行类似的操作.某些字符，例如点或破折号必须在引号之间.

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

输出

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

输出

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

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

---

---

在较少的情况下，没有for句子，我找不到一种干净的方法，但是这段代码有效(输出非常脏):

---

---

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

很少

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

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

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

输出

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

这篇关于在LESS/SASS中为内容属性重复点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！