Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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: scale, rotate, translate-x, translate-y, skew-x, skew-y, origin-x, origin-y. However, just remember this is only really useful for combining multiple transforms. Ordinarily, for a single transform, just use the standard transform mixins already...