css - Sass 变量和梯度

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

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

score 6 · Accepted Answer

You can indeed put SASS variables into brackets, like the gradient selector syntax. All you have to do is enclose your variable with a preceeding hash-mark and then parentheses, like so:

#{$myVar}

That's it!

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

ETC...

score 0 · Accepted Answer

在 .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。因为我是 Sass 人，所以检查一次 scss 代码的语法。

希望对你有帮助

score 0 · Accepted Answer

SCSS混合：

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

score 0 · Accepted Answer

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

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

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

另一方面，这确实有效：

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

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

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

css - Sass 变量和梯度

6 回答 6

Related

Reference