How to generate CSS content with a SASS for loop

css, for-loop, sass

Solution

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

Problem

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?

Original source