scss - Transiciones SASS/Compass

sass scss

Question

¿Es posible usar Compass o SASS para generar la siguiente transición de CSS que generará todos los prefijos de varios proveedores?

-webkit-transition: all 0.3s ease-in-out;

¿Alguien puede indicarme la biblioteca correcta?

Answer 1

SASS Mixin

@mixin transition($transition){
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@include transition(all 0.3s ease-in-out);

Answer 2

Use la mezcla de transition brújula :

@include transition(all 0.3s ease-in-out);

Answer 3

Mixin para crear animaciones usando transiciones de propiedades simples o "todas"

@include transition(PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION)
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}

Mixin para crear animaciones usando múltiples transiciones de propiedades.

@include multi-transition("PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION, PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION")
@mixin multi-transition($transition) {
-webkit-transition: #{$transition};
-moz-transition: #{$transition};
-ms-transition: #{$transition};
-o-transition: #{$transition};
transition: #{$transition};
}