Question

大家好！我想在Vaadin 7.1.0项目中使用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;
}

这似乎是正确的，但为什么它不起作用？

Answer 1

您确实可以将SASS变量放入括号中，例如渐变选择器语法。您所要做的就是用变量前面的哈希标记括起您的变量，然后括起来，如下所示：

#{$myVar}

那就是它！

Answer 2

如果将代码复制到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;
}

Answer 3

看起来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)

等...

Answer 4

在.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人。

希望它能帮到你

Answer 5

@mixin purple-gradient($attribute) {
  #{$attribute}: -webkit-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: -moz-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: -ms-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: -o-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: linear-gradient($second-color-for-gradient, $purple) !important;
}

Answer 6

我不确定是否还有人感兴趣，但是似乎sass在线性渐变声明中编译大写十六进制值存在问题。例如，此不起作用：

$colorTop: #EEEEEE;
$colorBottom: #222CCC;

.element { 
  background: linear-gradient($colorTop,$colorBottom); 
}

另一方面，这确实有效：

$colorTop: #eeeeee;
$colorBottom: #222ccc;

.element { 
  background: linear-gradient($colorTop,$colorBottom); 
}

因此，如果遇到此问题，请尝试在变量声明中使用小写的十六进制值。

Sass变量和渐变

6 个答案: