Skip to main content

Tedshd's Dev note

Category: Compass

Compass - Use transform in compass 1.0.1

# Compass - Use transform in compass 1.0.1 On august 15, 2014 Compass release 1.0.1 Some code in scss change wording. This article provide CSS3 transform wording in scss. I use this Mixin @import "compass/css3"; /*simple-transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y, $origin-x, $origin-y)*/ @include simple-transform(1, 45deg, 5px, -15px, 0, 0, 0, 0); /* Advance Usage */ /*@include create-transform($perspective, $scale-x, $scale-y, $scale-z, $rotate-x, $rotate-y, $rotate-z, $rotate3d, $trans-x, $trans-y, $trans-z, $skew-x, $skew-y, $origin-x, $origin-y, $origin-z, $only3d);*/ Refer - Compass Transform | Compass Documentation ...

Use CSS3 animation in Compass

# Use CSS3 Animation In Compass Compass default dosen’t have mixin in CSS3 animation We can use this method in scss /* define */ $animation-support: webkit, moz, o, ms, not khtml; /* use */ .animation { @include experimental('animation-name', move, $animation-support); @include experimental('animation-duration', 5s, $animation-support); @include experimental('animation-iteration-count', 1, $animation-support); } and add keyframes /* define */ $animation-support: webkit, moz, o, ms, not khtml; @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } /* use */ . ...