Question

我基本上想做什么

@gradientType: radial-gradient;

background: @gradientType(to bottom, ...)

我想在一个Less变量中放一个CSS函数，一个渐变（btw：这些被称为函数吗？我不确定），稍后用变量如@variable()调用它？

为什么呢？可维护性！

我有一个文件variables.less，我希望在动态的几个地方更改为渐变（即）。

所以而不是

.a { background: linear-gradient(..) }    
.b { background: linear-gradient(..) }    
.c { background: linear-gradient(..) }

我会喜欢

.a { background: @myGradient(..) }    
.b { background: @myGradient(..) }    
.c { background: @myGradient(..) }

线性渐变（linear-gradient(to bottom, red, blue)）和径向渐变（radial-gradient(circle, red, blue)）类型具有相同的语法。所以我会有四个变量，如gradientType，gradientOpts，gradientStart，gradientStop，并根据变量更改渐变类型。这只是一个简化的例子。

Answer 1

要直接回答您的问题，您可以使用变量插值来实现此目的。

@myGradient: radial-gradient;

.a { background: ~"@{myGradient}(to bottom, red, blue)"; }    
.b { background: ~"@{myGradient}(to bottom, green, yellow)"; }    
.c { background: ~"@{myGradient}(to bottom, orange, gold)"; }

但我建议使用像参数化mixin这样的东西来处理这样的事情。下面是一个示例mixin的代码，它根据输入变量创建radial-gradient或linear-gradient。

@gradType: linear-gradient;

.a { .background(@gradType; to bottom; red; blue); }    
.b { .background(@gradType; to bottom; green; yellow); }    
.c { .background(@gradType; to bottom; orange; gold); }

.background(@gradType; @gradOpts; @gradStart; @gradEnd){
  & when (@gradType = linear-gradient){
    background: linear-gradient(@gradOpts, @gradStart, @gradEnd);
  }
  & when (@gradType = radial-gradient){
    background: radial-gradient(@gradOpts, @gradStart, @gradEnd);
  }  
}

使用受保护的mixins（如上所述）的问题是当@gradType变量的值超出两个可能的值时（比如说conical-gradient是值），那么代码就会失败并且不会引起任何错误。当你正在编写一个将被其他人使用的库时，这将是一个问题（因此当值无效时想要抛出错误）。在这种情况下，您可以更改下面给出的代码。使用此方法时，如果为@gradType变量提供了无效的输入值，Less编译器将抛出错误。

@gradType: linear-gradient;

.a { .background(@gradType; to bottom; red; blue); }    
.b { .background(@gradType; to bottom; green; yellow); }    
.c { .background(@gradType; to bottom; orange; gold); }

.background(linear-gradient; @gradOpts; @gradStart; @gradEnd){
  background: linear-gradient(@gradOpts, @gradStart, @gradEnd);
}
.background(radial-gradient; @gradOpts; @gradStart; @gradEnd){
  background: radial-gradient(@gradOpts, @gradStart, @gradEnd);
}

是否可以使用Less变量中的CSS函数？

1 个答案: