SASS/指南针转换答案

【问题标题】：SASS/Compass TransitionsSASS/指南针转换
【发布时间】：2012-12-27 09:31:16
【问题描述】：

是否可以使用 Compass 或 SASS 输出以下 CSS 过渡，该过渡将输出所有各种供应商前缀：

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

谁能指出正确的图书馆？

【问题讨论】：

compass 确实有一个可怕的文档

标签： sass compass-sass

【解决方案1】：

SASS 混合

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

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

【讨论】：

【解决方案2】：

使用单个或“所有”属性转换创建动画的 Mixin

@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

@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};
}

【讨论】：

【解决方案3】：

使用compass' transition mixin:

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

【讨论】：

除了 Joseph 链接的过渡之外，如果您正在寻找动画，Eric Meyer 有一个 Compass Animation plugin 需要 Compass v0.13（目前是 alpha）
@include transition(color 0.3s ease-in-out, background-color 0.3s ease-in-out); 如果你想定位特定的样式（我相信这会更快）