Create transitions variable with Sass

Question

Is there a way to create a variable for transitions in Sass to replicate this:

-webkit-transition: .2s;
-moz-transition: .2s;
-ms-transition: .2s;
-o-transition: .2s;
transition: .2s;

I'm just getting my feet wet with Sass and I'm using CodeKit to compile.

Thanks!

Answer 1

You can create a mixin which will encapsulate that:

@mixin transition($duration) {
    -webkit-transition: $duration;
    -moz-transition: $duration;
    -ms-transition: $duration;
    -o-transition: $duration;
    transition: $duration;
}

Then use it like this:

.class { @include transition(.2s); }

You may also want to look at Compass, which includes many built-in mixins for CSS3 stuff like transitions.

Alternatively, you may want to run your CSS through Autoprefixer (after compiling your Sass to CSS). This is a PostCSS plugin (though you can also use it via Gulp, Grunt, Webpack, and many other build tools), which automatically adds (and removes) the necessary vendor prefixes, so that you only need to author unprefixed CSS. You can configure it with which browsers you want to support, and it'll make sure any required prefixes are there.

Answer 2

You can also use the transition-duration mixin http://compass-style.org/reference/compass/css3/transition/#mixin-transition-duration

a {
  color:red;
  @include transition-duration(.2s);
  &:hover {
    color:blue;
  }
}