How to generate CSS content with a SASS for loop

Question

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?

Answer 1

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