less - LESS 过渡混合

Question

有人可以展示如何使用以下 LESS mixin 轻松地将以下属性转换为.25s吗？

边框顶部：6px 实心#ff3300；

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

Answer 1

更新：LESS 1.4+ 功能

使用 LESS 1.4，不需要逗号分隔参数的原始答案中使用的 javascript。相反，在参数字符串末尾使用“虚拟”分号会导致逗号被视为列表分隔符，而不是参数分隔符，因此现在在估算多个转换时可以使用：

少 1.4+

mixin 调用中的分号 ( .transition-properties(border-top .25s linear, color .5s linear;);) 非常重要。如果省略，则两个参数之间的逗号将被删除，最终导致无效的 css 规则。

.transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear, color .5s linear;); /* semicolon is necessary */
}                                                                |
                                                          NOTE THIS SEMICOLON

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

CSS 输出

请注意，逗号位于两个属性值之间：

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear, color 0.5s linear;
  -moz-transition: border-top 0.25s linear, color 0.5s linear;
  -o-transition: border-top 0.25s linear, color 0.5s linear;
  transition: border-top 0.25s linear, color 0.5s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

原始答案 [Pre LESS 1.4]

显然，具体情况将取决于您的具体实施。但是，这通常说明了您将如何使用它：

较少的

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


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear);
}

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

CSS 输出

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear;
  -moz-transition: border-top 0.25s linear;
  -o-transition: border-top 0.25s linear;
  transition: border-top 0.25s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

请参阅示例小提琴

解释

什么

@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;

允许您做的是放入多个逗号分隔的转换，例如：

.transition-properties(border-top .25s linear, color 1s linear);

它将编译以使它们用逗号分隔（例如，仅显示一行）：

transition: border-top 0.25s linear, color 1s linear;

如果您只使用直线，则@arguments最终没有逗号分隔：

transition: border-top 0.25s linear color 1s linear;

这对于该属性是不正确的。