Question

我正在更新一些旧CSS表并为我的项目创建一个新的LESS表。在我的旧CSS表中，我有两个用于制作渐变的十六进制值。

十六进制值在一个实例中像十六进制值一样传递，如下所示：

background: -webkit-gradient(linear, left top, left bottom, from(#0079bc), to(#00509d));

并且在同一规则中的另一个实例中的字符串值如下：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00509d', endColorstr='#00509d');

如果我试图将两个十六进制值保持为新LESS文件中的变量，如何在第二个实例中将十六进制值变量作为字符串传递？

Answer 1

这样的事情：

.gradientMix(@hex1, @hex2) {
  background: -webkit-gradient(linear, left top, left bottom, from(@hex1), to(@hex2));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{hex1}', endColorstr='@{hex2}');
}

.gradientMix(#0079bc,#00509d);

哪个输出：

background: -webkit-gradient(linear, left top, left bottom, from(#0079bc), to(#00509d));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0079bc', endColorstr='#00509d');

注意我是如何通过用括号括起名称来访问引号内的变量，如下所示：@{hex1}来访问字符串中的@hex1变量。

字符串的变量值较小

1 个答案: