Sass and Compass for Designers

CSS transforms

Compass has a mixin for defining any CSS Level 3 transform.

The Compass 2D transform mixins follow exactly the same syntax as the W3C 2D Transform Functions (http://www.w3.org/TR/css3-transforms/#two-d-transform-functions).

Therefore, if we wanted to scale we could write this:

@include scale(2,2); // Make it twice original size

If we wanted to translate (translate moves an element in 2D space) we could write this:

@include translateX(20px); // Move it 20px right

For the odd occasions when you want to add multiple transforms to a single element, use the simple-transform mixin. Here's an example:

@include simple-transform(1.05,3deg);

That would scale the image by 1.05 and also rotate it by 3 degrees. The arguments must be passed in this order: ...