Fatal编程技术网
  • css/
  • Css 我可以定义一个较少的mixin来生成一个具有可变数量参数的转换属性吗？

Css 我可以定义一个较少的mixin来生成一个具有可变数量参数的转换属性吗？

css less

Css 我可以定义一个较少的mixin来生成一个具有可变数量参数的转换属性吗？,css,less,mixins,less-mixins,Css,Less,Mixins,Less Mixins,我正在介绍一个大型web应用程序项目来简化我的CSS。我有一些CSS规则可以将转换应用于不同数量的属性，例如： .movable { transition-property: top, left; transition-duration: 0.2s; transition-timing-function: ease; } .fadeAndStretchable { transition-property: opacity, width, height, marg

我正在介绍一个大型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行。）

请注意，
转换属性
的值以逗号分隔。这在CSS中是不寻常的：多个值通常是空格分隔的（如
border:1px solid#f00
）。LESS-mixin可以使用特殊的
@参数
值-但是否可以定义一个LESS-mixin，它接受可变数量的参数，并将它们转换为逗号分隔的值列表，适用于
转换属性

如果有必要，我很满意一个需要两个混合的解决方案：一个用于
转换属性
，另一个用于
转换持续时间
和
转换计时功能
。以下是我迄今为止所尝试的：

尝试1:使用带有未命名参数的@arguments 结果：错误减少（“未找到“.transition属性（顶部，左侧）”的匹配定义”）

尝试2:使用带有命名参数的@arguments 结果：错误减少（“未找到“.transition属性（顶部，左侧）”的匹配定义”）

尝试3：使用具有虚拟默认值的命名参数 结果：错误不会减少，但它会生成一个CSS规则
-webkit转换属性：top、left、p3、p4、p5
，浏览器会因为无法识别的属性而忽略该属性

我尝试过各种其他方法（例如，将属性作为字符串
'top，left'
传递），但所有方法都会导致相同的结果：错误更少或CSS无效

有没有办法解决这个问题？或者我必须咬紧牙关，定义一组在arity上重载的mixin，例如

.transition-property(@p1) {...}
.transition-property(@p1, @p2) {...}
.transition-property(@p1, @p2, @p3) {...}
.transition-property(@p1, @p2, @p3, @p4) {...}
etc.
从less.js 1.3开始，您必须指定。。。在参数列表中，表示可以添加更多参数。e、 g

.transition-property(...) {
 foo: @arguments;
}
多亏向我指出了
…
语法，我才设法找到了答案

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

  • …
    以允许可变参数
  • 回击
  • 变数
  • 结果表达式的
    ~
    前缀（即停止LESS将其包含在字符串中）
  • 老好人
呸。以下是最终的混音：

.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;
}
也许我误解了你的需要。为什么不能使用转义字符串

像这样：

.transition ( @property, @duration, @style: ease-in-out ) {
  -webkit-transition-property: @property;  
  -webkit-transition-duration: @duration;
  -webkit-transition-timing-function: @style;

  -moz-transition-property: @property;  
  -moz-transition-duration: @duration;
  -moz-transition-timing-function: @style;

  -ms-transition-property: @property;  
  -ms-transition-duration: @duration;
  -ms-transition-timing-function: @style;

  -o-transition-property: @property;  
  -o-transition-duration: @duration;
  -o-transition-timing-function: @style;

  transition-property: @property;  
  transition-duration: @duration;
  transition-timing-function: @style;
}

#my-id {
  .transition( ~"background, border-color, color", 2s );
}
这正是我们用于多属性转换的内容。从未遇到过问题。

灵活（小于1.5.1+） 此解决方案不使用任何内联javascript，并允许：

  • 要设置的默认值
  • 要传递的任意数量的属性、持续时间、延迟等
  • 以长格式或紧凑格式输出
  • 原始列表输入，而不是需要时输入的参数组
    • 如果属性的数量大于持续时间、延迟或计时的数量，则如果设置了
    compact
    输出，则持续时间/延迟/计时的最终值将成为传递数量以外的所有其他属性的该参数值，但如果
    compact
    未设置，然后，输出长表单，并将其保存

    较少的混入

    .transition（@props:all；
@持续时间：1s；
@延迟：0秒；
@时机：轻松；
@紧凑：正确；
@原始输入：false）{
.output（）时（@raw input=false）和非（@compact=true）{
-webkit转换属性：@props；
-moz转换属性：@props；
-ms转换属性：@props；
-o-transition-property:@props；
转换属性：@props；
-webkit转换持续时间：@持续时间；
-moz转换持续时间：@duration；
-ms转换持续时间：@持续时间；
-o-过渡-持续时间：@持续时间；
过渡持续时间：@持续时间；
-webkit转换延迟：@延迟；
-moz转换延迟：@delay；
-ms转换延迟：@延迟；
-o-转换延迟：@延迟；
转换延迟：@延迟；
-webkit转换计时功能：@计时；
-moz转换定时功能：@定时；
-ms转换定时功能：@定时；
-o-转换-定时-功能：@定时；
转换定时功能：@定时；
}
.output（）时（@raw input=false）和（@compact=true）{
@propsLength：长度（@props）；
@durationLength：长度（@duration）；
@delayLength：长度（@delay）；
@timingLength：长度（@timing）；
.buildString（@i，@s:~''）当（@i 1）{
@除法器：~'@{s}'；
}
.setDivider（）当（@i=1）{
@分隔符：~''；
}
.setDivider（）；
@字符串：@divider@prop@dur@del@time；
.buildString（（@i+1），@string）；
}
.buildString（1）；
.buildString（@i，@s:~''）何时（@i>@propsLength）{
.compact（@s）；
}
}
.output（）而不是（@raw input=false）{
.compact（@原始输入）；
}
.compact（@string）{
-webkit转换：@string；
-moz转换：@string；
-ms转换：@string；
-o-过渡：@string；
转换：@string；
}
.output（）；
}
    少用示例

    .test{
.transition（）；
}
.测试道具{
.过渡段（宽度）；
}
.测试持续时间{
.过渡期（@持续时间：3s）；
}
.测试延迟{
.转换（@延迟：10s）；
}
.测试时间{
.过渡（@定时：线性）；
}
.全部测试{
.过渡（高度，4s，12s，放松）；
}
.测试多重转换{
.过渡（宽度、高度、顶部；1s、2s；0s、1s、3s；缓进、缓出、缓进）；
}
.测试编号

    .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;
}

    

    .transition ( @property, @duration, @style: ease-in-out ) {
  -webkit-transition-property: @property;  
  -webkit-transition-duration: @duration;
  -webkit-transition-timing-function: @style;

  -moz-transition-property: @property;  
  -moz-transition-duration: @duration;
  -moz-transition-timing-function: @style;

  -ms-transition-property: @property;  
  -ms-transition-duration: @duration;
  -ms-transition-timing-function: @style;

  -o-transition-property: @property;  
  -o-transition-duration: @duration;
  -o-transition-timing-function: @style;

  transition-property: @property;  
  transition-duration: @duration;
  transition-timing-function: @style;
}

#my-id {
  .transition( ~"background, border-color, color", 2s );
}

    

      .transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease);
              |---Properties----|-Dur.--|---Delay---|---------Timing--------|
                                |       |           |
                          semicolons divide groups of parameters

    

      .transition(@raw-input: top 1s, bottom 1s, color 3s 1s linear;);
                                                               |
                                                    semicolon here needed

    

    .transition (@props: all; 
             @duration:1s; 
             @delay: 0s; 
             @timing: ease; 
             @raw-input: false) {
  .output() when (@raw-input = false) {
    @propsLength: length(@props);
    @durationLength: length(@duration);
    @delayLength: length(@delay);
    @timingLength: length(@timing);
    .buildString(@i, @s: ~'') when (@i <= @propsLength) {
      @prop: extract(@props, @i);
      .setDuration() when (@i <= @durationLength) {
        @dur: extract(@duration, @i);
      }
      .setDuration() when (@i > @durationLength) {
        @dur: extract(@duration, @durationLength);
      }
      .setDuration();
      .setDelay() when (@i <= @delayLength) {
        @del: extract(@delay, @i);
      }
      .setDelay() when (@i > @delayLength) {
        @del: extract(@delay, @delayLength);
      }
      .setDelay();
      .setTiming() when (@i <= @timingLength) {
        @time: extract(@timing, @i);
      }
      .setTiming() when (@i > @timingLength) {
        @time: extract(@timing, @timingLength);
      }
      .setTiming();
      .setDivider() when (@i > 1) {
        @divider: ~'@{s},';
      }
      .setDivider() when (@i = 1) {
        @divider: ~'';
      }
      .setDivider();
      @string: @divider @prop @dur @del @time;
      .buildString((@i + 1), @string);  
    }
    .buildString(1);
    .buildString(@i, @s: ~'') when (@i > @propsLength) {
      .compact(@s);
    }
  }
  .output() when not (@raw-input = false) {
    .compact(@raw-input);
  }
  .compact(@string) {
    -webkit-transition:@string; 
       -moz-transition:@string;
        -ms-transition:@string;
         -o-transition:@string; 
            transition:@string;    
  }
  .output();
}