软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

css – 我可以定义一个LESS mixin来生成具有可变数

收集整理的这篇文章主要介绍了css – 我可以定义一个LESS mixin来生成具有可变数量参数的transition属性吗?,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我将LESS引入一个大型的Web应用程序项目来简化我的CSS。我有一些CSS规则,将转换应用于不同数量的属性,例如:
.movable {    transition-property: top,left;    transition-duration: 0.2s;    transition-timing-function: ease;}.fadeAndStretchable {    transition-property: opacity,width,height,margin;    transition-duration: 1.5s;    transition-timing-function: ease-out;}

(注意:为了简洁起见,我已经省略了-webkit,-moz和-o属性:实际上,这些规则中的每一个都是12行长,而不是3)

请注意,transition-property的值是逗号分隔的。这在CSS中是不寻常的:多个值通常是空格分隔的(如在边框中:1px solid#f00)。 LESS mixins可以使用特殊的@arguments值为produce a space-separated list of all the mixin arguments – 但是可以定义一个LESS mixin,它可以使用可变数量的参数,并将它们转换成逗号分隔的值列表,适用于转换属性?

如果需要,我很满意一个需要两个混合的解决方案:一个用于转换属性,另一个用于转换持续时间和转换时序功能。这是我迄今为止所尝试过的

尝试1:使用带有未命名参数的@arguments

.transition-property() {    -webkit-transition-property: @arguments;    -moz-transition-property: @arguments;    -o-transition-property: @arguments;    transition-property: @arguments;}.movable {    .transition-property(top,left);}

结果:LESS错误(“没有找到匹配定义’.transition-property(top,left)’”)

尝试2:使用带有命名参数的@arguments

.transition-property(@p1,@p2,@p3,@p4,@p5) {    -webkit-transition-property: @arguments;    -moz-transition-property: @arguments;    -o-transition-property: @arguments;    transition-property: @arguments;}.movable {    .transition-property(top,left);}

结果:LESS错误(“没有找到匹配定义’.transition-property(top,left)’”)

尝试3:使用带有虚拟默认值的命名参数

.transition-property(@p1:p1,@p2:p2,@p3:p3,@p4:p4,@p5:p5) {    -webkit-transition-property: @p1,@p5;    -moz-transition-property:  @p1,@p5;    -o-transition-property:  @p1,@p5;    transition-property:  @p1,@p5;}.movable {    .transition-property(top,left);}

结果:没有LESS错误,但是它会生成CSS规则-webkit-transition-property:top,left,p3,p4,p5,因为浏览器因为无法识别的属性而忽略。

我已经尝试了各种其他方法(例如,将属性作为字符串“顶部,左侧”传递),但都会导致相同的事情:LESS错误或无效的CSS。

有没有办法呢?或者我必须咬住子弹,并定义一套超自然的混合物,例如

.transition-property(@p1) {...}.transition-property(@p1,@p2) {...}.transition-property(@p1,@p3) {...}.transition-property(@p1,@p4) {...}etc.

解决方法

我已经设法弄清楚,因为 Luke Page指向我的…语法。

解决方案是使用以下方法:

…允许变量参数
JavaScript evaluation的反铲
变量string interpolation
A〜前缀到escape的结果表达式(即将LESS封闭在字符串中)
好老regular expressions

唷。这是结果mixin:

.transition-properties(...) {    -webkit-transition-property: ~`"@{arguments}".replace(/[\[\]]/g,'')`;}

这是完整的版本,具有完整的浏览器扩展:

.transition-properties(...) {    @props: ~`"@{arguments}".replace(/[\[\]]/g,'')`;    -webkit-transition-property: @props;    -moz-transition-property: @props;    -o-transition-property: @props;    transition-property: @props;}

总结

以上是为你收集整理的css – 我可以定义一个LESS mixin来生成具有可变数量参数的transition属性吗?全部内容,希望文章能够帮你解决css – 我可以定义一个LESS mixin来生成具有可变数量参数的transition属性吗?所遇到的程序开发问题。