How to create CSS content using the SASS for loop

Question

I am trying to create a SASS mixin that will work as follows:

@include custom-horiz-sep(7); 

which CSS outputs:

 content: "xxxxxxx"; 

(7 predefined characters)

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

Answer 1

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

 @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