Compass - Use transform in compass 1.0.1
on 2014-08-29
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);*/
Use CSS3 animation in Compass
on 2013-10-12
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 */
.animation {
@include experimental('animation-name', move, $animation-support);
@include experimental('animation-duration', 5s, $animation-support);
@include experimental('animation-iteration-count', 1, $animation-support);
}
@include keyframes(move) {
0% {
top: 780px;
opacity: 0;
}
100% {
top: 450px;
}
}
Refer - keyframes-sass-output.css Refer - Getting Compass to add vendor prefixes to animation selectors