如何为停点数量可变的梯度创建LESS mixin? [英] How do you make a LESS mixin for gradients with a variable number of stops?
本文介绍了如何为停点数量可变的梯度创建LESS mixin?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我为渐变找到的所有Less Mixins只有固定数量的停止点.逗号使用中less与css之间的冲突使变量停止无法以相同的方式进行.
All of the Less mixins I have found for gradients have only a fixed number of stops. The clash between less and css in the use f the comma makes variable stops impossible to do in the same way.
我用于2向渐变的当前mixin
Current mixin that I use for 2 way gradients
.gradient (@origin: left, @step-1: @white, @step-2: @black, @fallback: @step-1){
background-color: @fallback;
background: -webkit-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
background: -moz-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
background: -ms-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
background: -o-linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
background: linear-gradient(@origin, @step-1, @step-2) @fallback no-repeat;
}
3种方式
.gradient-3-way (@origin: left, @step-1: @white, @step-2: @black, @step-3: @white, @fallback: @step-1){
background-color: @fallback;
background: -webkit-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
background: -moz-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
background: -ms-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
background: -o-linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
background: linear-gradient(@origin, @step-1, @step-2, @step-3) @fallback no-repeat;
}
推荐答案
不需要单独的变量
您需要做的就是确保使用分号作为参数的分隔符,即使这只是您要传递的一个参数.这样就可以了:
No Separate Variable Needed
All that you need is to make sure you use a semicolon as a separator for the parameters, even if that happens to just be only one parameter you are passing. So this works:
很少
@white: #fff;
.gradient (@origin: left, @fallback: @white, @stops){
background-color: @fallback;
background: -webkit-linear-gradient(@origin, @stops) @fallback no-repeat;
background: -moz-linear-gradient(@origin, @stops) @fallback no-repeat;
background: -ms-linear-gradient(@origin, @stops) @fallback no-repeat;
background: -o-linear-gradient(@origin, @stops) @fallback no-repeat;
background: linear-gradient(@origin, @stops) @fallback no-repeat;
}
.test {
.gradient(@stops: #fff 0, #000 20px, #000 20px, #f00 20px;)
} |
this final semicolon
causes the commas to
become list separators
instead of parameter
separators making the whole
thing part of one variable
CSS输出
.test {
background-color: #ffffff;
background: -webkit-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
background: -moz-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
background: -ms-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
background: -o-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
background: linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
}
这篇关于如何为停点数量可变的梯度创建LESS mixin?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文