如何用SASS for循环生成CSS内容 [英] How to generate CSS content with a SASS for loop

问题描述

  @include custom-horiz-sep（ 7）; 
  

会输出CSS：

 内容：xxxxxxx; 
  

（7个预定义字符）

如何在SASS中使用'for'循环来创建content属性的值？ 解决方案

和cimmanon的帮助，这是什么似乎工作很好：

$ p $ @mixin custom-horiz-sep（$ num）{
$ chr：x;
$ content：$ chr;
@for $ i从0到$ num {
$ content：$ content + $ chr;
}
内容：＃{$ content};
}

h1：之前{
@include custom-horiz-sep（25）;
}


http://codepen.io/Protohominid/pen/rgzKF

I'm trying to create a SASS mixin that would operate like this:

@include custom-horiz-sep(7);

which would output CSS:

content: "xxxxxxx";

(7 pre-defined characters)

How would I use a 'for' loop in SASS to create the value for the "content" property?

解决方案

With bookcasey and cimmanon's help, here's what seems to work great:

@mixin custom-horiz-sep($num) {
  $chr: "x";
  $content: $chr;
  @for $i from 0 to $num {
      $content: $content + $chr;
  }
  content: "#{$content}";
}

h1:before {
  @include custom-horiz-sep(25);
}

http://codepen.io/Protohominid/pen/rgzKF

这篇关于如何用SASS for循环生成CSS内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！