2013-07-05 117 views
1

Hy everyone! 我想在Vaadin 7.1.0项目中为线性渐变背景使用Sass变量,但有些原因不起作用。 代码:Sass变量和梯度

$topBarDarkBlue: #5F7FB7; 
$topBarLightBlue: #8EABE1; 

.title { 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue), 
    color-stop(100%, $topBarLightBlue)); 
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%); 
    width: 100%; 
    height: 70px; 
} 

这似乎是正确的,但为什么它不工作?

+2

您正在使用的专有属性,您需要使用的一般性质太序,让您的梯度逸出 –

+0

什么“不工作”?有一个错误(错误是什么?)?生成的输出是错误的(它有什么问题?)? – cimmanon

+0

它不显示任何错误,只是不执行渐变。 – Slenkra

回答

0

如果您将代码复制到JSFiddle,渐变正在工作。它也可以把变量的CSS类:

.title { 
    $topBarDarkBlue: #5F7FB7; 
    $topBarLightBlue: #8EABE1; 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue), 
    color-stop(100%, $topBarLightBlue)); 
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%); 
    width: 100%; 
    height: 70px; 
} 
+0

主要原因是在所有的css文件中使用这些颜色,因为我在代码中的很多地方使用了这些颜色。 – Slenkra

0

它看起来像在Vaadin 7.1 SCSS编译器不能,所以你必须使用替代变量颜色值正确替换变量。更改

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue) 

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5F7FB7) 

等等

+0

很伤心。我想在代码中的许多地方使用这些代码,如果我想改变它们,我必须编写它们中的每一个。 – Slenkra

+0

您可以创建一个关于http://dev.vaadin的问题的故障单。 com/newticket –

+0

我会的,我希望vaadin开发者能够解决这个问题。 :) – Slenkra

1

你可以把确实SASS变量放在括号,如梯度选择语法。你所要做的就是把你的变量用前面的哈希标记和括号括起来,如下所示:

#{$myVar} 

就是这样!

+0

看着它,这就是所谓的插值http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_谢谢@PWM –

0

在.sass/.scss中全局使用渐变的最佳方法是通过mixins使用它们。

您可以创建梯度的混入:

$topBarDarkBlue: #5F7FB7; 
$topBarLightBlue: #8EABE1; 

@mixin bg-gradient(){ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue); 
background: -moz-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue); 
background: -ms-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue); 
} 

现在你只需要调用它在主.sass/.scss文件。

.title{ 
@include bg-gradient(); 
} 

我以前在我最近的一个项目中做过这个,但它不是基于Vaadin。只需检查这与vaadin工作与否。检查一次scss代码的语法,因为我是一个Sass人。

希望它会帮助你