Sass 变量和梯度答案

【问题标题】：Sass variables and gradientSass 变量和梯度
【发布时间】：2013-07-03 04:38:30
【问题描述】：

大家好！我想在 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;
}

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

【问题讨论】：

您正在使用专有属性，您也需要使用通用属性才能使渐变工作
什么“不起作用”？有错误（错误是什么？）？生成的输出错误（有什么问题？）？
它没有显示任何错误，只是不做渐变。

标签： css sass vaadin

【解决方案1】：

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

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

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

另一方面，这确实有效：

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

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

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

【讨论】：

如何设置线性渐变的角度。可以在变量中设置角度。
@NupurJ.，添加 45° 角的语法是：$angle: "45deg";background: linear-gradient(#{$angle},#eeeeee,#222ccc)

【解决方案2】：

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

【讨论】：

【解决方案3】：

在 .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 代码的语法。

希望对你有帮助

【讨论】：

【解决方案4】：

您确实可以将 SASS 变量放入括号中，就像渐变选择器语法一样。您所要做的就是用前面的井号标记和括号括起来您的变量，如下所示：

#{$myVar}

就是这样！

【讨论】：

查了一下，这个叫插值sass-lang.com/documentation/…谢谢@PWM

【解决方案5】：

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

等等……

【讨论】：

这很可悲。我想在代码中的很多地方使用它们，如果我想改变它们，我必须编写它们中的每一个......
我会的，我希望 vaadin 开发者能解决这个问题。 :)

【解决方案6】：

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

【讨论】：

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