Question

我正在使用mdl，其颜色变量设置为$color-primary: '255, 0, 0' !default;

这使我很难采取这种颜色并使其变亮。

我尝试过使用unquote()，但它给了我一个错误：

$color的参数lighten($color, $amount)必须是颜色

$color-primary: '255, 0, 0' !default;
$light-accent: lighten(unquote('rgb(#{$color-primary})'), 13.5%) !default;

有没有我可以将其转换为颜色？

Answer 1

这是一个有趣的问题。您在MDL source中发现$color-primary实际上只是一个包含引号的字符串："63,81,181"。

这是一个棘手的部分：MDL到处都在使用这些字符串。他们实际上并没有以SASS理解它们的方式评估这些颜色。所以这个：

unquote('rgb(#{$color-primary})')

没有返回SASS rgb() instance method，它只返回一个普通的＆＃39;字符串。

这很长的说法，我认为你不能做你想做的事。不过，您可以使用$palette-indigo-xxx中的其他颜色，格式为OnMessage（来自MDL $palette-indigo的照片）。

material.io

Answer 2

您不能将字符串用作颜色方法的输入 codepen

$color-primary: '255, 0, 0' !default;
$light-accent: lighten(convertStringToColor($color-primary), 40.5%) !default;

body{
  background: convertStringToColor($color-primary);
}

h1{
  color: $light-accent;
}

Sass将字符串转换为颜色

2 个答案: