How can I use CSS animations in SASS? -


i'm trying add simple css animation bootstrap links in rails, i'm having 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 here? possible?

try 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 define new mixin, clean things up. transition ment defined in declaration of element, before tranisition ist triggered. p.s dont forget other prefixes.

here demo: http://jsfiddle.net/wzagr/


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -