category: Compass

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);*/

Refer - Compass Transform | Compass Documentation

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

Read more