如何在SASS中使用CSS动画？

我想添加一个简单的CSS动画到Rails中的一些引导链接，但我遇到了一些麻烦。这是什么突破：如何在SASS中使用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%); 
}

这里的任何帮助吗？这甚至有可能吗？

来源

2014-03-06 user3172050

，了解您的问题是，我们需要更多的代码。请添加更多相关的sass代码，例如你在哪里使用'$ link-color-hover'？ – DonJuwe

此外，你应该看看http://compass-style.org/，它可以帮助你在sass中使用诸如转换之类的东西。 – DonJuwe

什么是错误？ – cimmanon

试试这样说：

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

你不需要定义一个新的混入，这仅仅是一个干净的东西了。在触发囚犯之前，这种过渡是要在元素声明中加以界定的。 P.s不要忘记其他前缀。

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

来源

2014-03-06 08:06:57

是的，但这不适用于Bootstrap和Rails。 – user3172050

由于某些原因，这不适用于Bootstrap和Rails。我想也许属性需要有一个“$”来代替？ – user3172050

所以我想通了...... 我是过于复杂的事情，显然我只是需要找到什么，我试图做的对应属性引导。

此外，我转换了“@import bootstrap”的位置，解决了其他一些问题，我几乎立即就解决了，所以请确保您获得正确的位置！

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

的HTML输出是在这里：

http://jsfiddle.net/kgLPd/

来源

2014-03-07 02:27:57 user3172050

如何在SASS中使用CSS动画？

回答

相关问题