Skip to content

Instantly share code, notes, and snippets.

@rnmp
Created July 28, 2011 21:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rnmp/1112610 to your computer and use it in GitHub Desktop.
Save rnmp/1112610 to your computer and use it in GitHub Desktop.
@for $n from 1 through 7
#plantilla-#{$n}
:left 7em*$n
:-webkit-transform rotate(10deg*$n/(1.61803399*$n*$n))
@adamstac
Copy link

Good stuff! Here's how it would look if you used the Compass rotate helper. Also note the location of the colon. You are using the OLD Sass syntax.

@import "compass"

@for $n from 1 through 7
  #plantilla-#{$n}
    $rotation: 10 * ($n / (1.61803399 * $n * $n))
    left: 7em * $n
    +rotate(#{$rotation}deg)

... with this as the output:

#plantilla-1 {
  left: 7em;
  -moz-transform: rotate(6.18deg);
  -webkit-transform: rotate(6.18deg);
  -o-transform: rotate(6.18deg);
  -ms-transform: rotate(6.18deg);
  transform: rotate(6.18deg);
}

#plantilla-2 {
  left: 14em;
  -moz-transform: rotate(3.09deg);
  -webkit-transform: rotate(3.09deg);
  -o-transform: rotate(3.09deg);
  -ms-transform: rotate(3.09deg);
  transform: rotate(3.09deg);
}

#plantilla-3 {
  left: 21em;
  -moz-transform: rotate(2.06deg);
  -webkit-transform: rotate(2.06deg);
  -o-transform: rotate(2.06deg);
  -ms-transform: rotate(2.06deg);
  transform: rotate(2.06deg);
}

#plantilla-4 {
  left: 28em;
  -moz-transform: rotate(1.545deg);
  -webkit-transform: rotate(1.545deg);
  -o-transform: rotate(1.545deg);
  -ms-transform: rotate(1.545deg);
  transform: rotate(1.545deg);
}

#plantilla-5 {
  left: 35em;
  -moz-transform: rotate(1.236deg);
  -webkit-transform: rotate(1.236deg);
  -o-transform: rotate(1.236deg);
  -ms-transform: rotate(1.236deg);
  transform: rotate(1.236deg);
}

#plantilla-6 {
  left: 42em;
  -moz-transform: rotate(1.03deg);
  -webkit-transform: rotate(1.03deg);
  -o-transform: rotate(1.03deg);
  -ms-transform: rotate(1.03deg);
  transform: rotate(1.03deg);
}

#plantilla-7 {
  left: 49em;
  -moz-transform: rotate(0.883deg);
  -webkit-transform: rotate(0.883deg);
  -o-transform: rotate(0.883deg);
  -ms-transform: rotate(0.883deg);
  transform: rotate(0.883deg);
}

@rnmp
Copy link
Author

rnmp commented Jul 28, 2011

For some reason, the old syntax feels more natural to me. But I didn't know it was considered old. Does it affects the performance?

@adamstac
Copy link

Don't think so, but it's been deprecated so one day support for it might drop and you'd have to update all your codes :(

@rnmp
Copy link
Author

rnmp commented Jul 28, 2011

Oh, crap. Thanks for the update then. :B

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment