secret
Last active

  • Download Gist
rotated-text.scss
SCSS
1 2 3 4 5
=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
$angle-per-char: $angle-span / $num-letters;
@for $i from 1 through $num-letters
.char#{$i}
+transform(rotate($angle-offset + $angle-per-char * $i))

Chris,

Just a quick heads up: this is listed as an .scss, while it's closer to validating as .sass if you remove the semicolon in lin e 2. Otherwise it's missing some curly brackets, etc.

For future reference, this is what the .scss version would look like:

@mixin rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg) {
$angle-per-char: $angle-span / $num-letters;
@for $i from 1 through $num-letters {
.char#{$i} {
@include transform(rotate($angle-offset + $angle-per-char * $i))
}
}
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.