How can I use CSS animations in SASS?

Question

I'm trying to add a simple CSS animation to some bootstrap links in Rails, but I'm having some trouble. Here's what's breaking:

$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%);
}

Any help here? Is this even possible?

Answer 1

Try it like this:

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

You dont Need to define a new mixin, this is just to clean Things up. The transition is ment to be defined in the declaration of the element, before the tranisition ist triggered. Ps dont forget the other prefixes.

Here is a demo: http://jsfiddle.net/Wzagr/

Answer 2

So I figured it out... I was over-complicating things, and apparently I simply needed to find the Bootstrap property that corresponded with what I was trying to do.

Also, I switched around the placement of "@import bootstrap", and that solved half of the other problems I was having almost instantly, so make sure you get the placement right!

SASS:

.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%);
    }
}

The HTML output is here:

http://jsfiddle.net/kgLPd/