如何在SASS中使用CSS动画？

Question

我正在尝试向Rails中的一些引导链接添加简单的CSS动画，但是遇到了一些麻烦。 发生了什么事：

$link-color-hover:
rgba(85, 85, 85, .3);
:hover, :focus, :active {
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
color: darken(#777, 50%);
}

这里有什么帮助吗？ 这有可能吗？

Answer 1

像这样尝试：

    @mixin hovertransition {
        $link-color-hover: rgba(85, 85, 85, .3);
        color:$link-color-hover;

        -webkit-transition-delay: 0s;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-property: all;
        -webkit-transition-timing-function: ease;

        &:hover, &:focus, &:active {
            color: darken(#777, 50%);
        }

    }

.transition-link
{
    @include hovertransition;
}

HTML

<a href="#" class="transition-link">Test me</a>

您不需要定义新的mixin，这只是为了清理事物。 转换要在触发tranistition ist之前在元素的声明中定义。 PS不要忘记其他前缀。

这是一个演示： http : //jsfiddle.net/Wzagr/

Answer 2

所以我想出了...我使事情变得过于复杂，显然我只需要找到与我尝试做的事情相对应的Bootstrap属性。

另外，我切换了“ @import bootstrap”的位置，这几乎解决了我几乎立即遇到的其他一半问题，因此请确保正确放置！

上海社会科学院：

.navbar-right li:hover {
    background-color: #95a5a6;
    color: rgba(85, 85, 85, .3);
    &:hover, &:focus, &:active {
      -webkit-transition-delay: 0s;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-property: all;
      -webkit-transition-timing-function: ease;
       color: darken(#777, 50%);
    }
}

HTML输出在这里：

http://jsfiddle.net/kgLPd/