如何在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/