那些遇到过的问题

我可以定义一个LESS mixin来生成具有可变数量参数的transition属性吗？

Mar*_*ker 16 css mixins less less-mixins

我正在向一个大型Web应用程序项目介绍LESS以简化我的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;
}
Run Code Online (Sandbox Code Playgroud)

(注:我省略了-webkit,-moz和-o这里的属性为简洁:在现实中每个这些规则是12线长,而不是3)

请注意,值以transition-property逗号分隔.这在CSS中很常见:多个值通常以空格分隔(如border: 1px solid #f00).较少的mixins可以使用特殊@arguments值来生成所有mixin参数的空格分隔列表 - 但是是否可以定义一个LESS mixin,它接受可变数量的参数并将它们转换为逗号分隔值列表,适合于transition-property？

如果有必要,我很满意需要两个mixin的解决方案:一个用于transition-property和另一个用于transition-duration和transition-timing-function.这是我到目前为止所尝试的:

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

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

.movable {
    .transition-property(top, left);
}
Run Code Online (Sandbox Code Playgroud)

结果: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);
}
Run Code Online (Sandbox Code Playgroud)

结果:LESS错误("找不到'.transition-property(top,left)'"的匹配定义")

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

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

.movable {
    .transition-property(top, left);
}
Run Code Online (Sandbox Code Playgroud)

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

我已经尝试了各种其他方法(例如将属性作为字符串传递'top,left')但所有结果都是相同的:LESS错误或无效的CSS.

这有什么办法吗？或者我必须咬紧牙关并定义一组在arity上重载的mixin,例如

.transition-property(@p1) {...}
.transition-property(@p1, @p2) {...}
.transition-property(@p1, @p2, @p3) {...}
.transition-property(@p1, @p2, @p3, @p4) {...}
etc.
Run Code Online (Sandbox Code Playgroud)

Mar*_*ker 29

由于Luke Page指向我的...语法,我已经设法弄清楚了.

解决方案是使用以下内容:

唷.这是最终的mixin:

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

这是完整版本,带有一整套浏览器扩展:

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

Spo*_*pot 21

也许我误解了你的需求.为什么你不能使用转义字符串？

像这样:

.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 );
}
Run Code Online (Sandbox Code Playgroud)

这正是我们用于多属性转换的内容.从来没有遇到过问题.

Sco*_*ttS 6

灵活(少1.5.1+)

此解决方案不使用任何内联JavaScript,它允许:

  1. 默认设置
  2. 要传递的任意数量的属性,持续时间,延迟等
  3. 以长形式或紧凑形式输出
  4. 如果需要,可以输入原始列表输入而不是输入参数组

如果属性的数量大于持续时间,延迟或时间的数量,那么如果compact设置了输出,则持续时间/延迟/时间的最终值将成为超出传递数量的所有其他属性的该参数的值,但是如果compact是不设置,则长的形式被输出和值被复制每浏览器解释的CSS标准离子.

没有Mixin

.transition (@props: all; 
             @duration:1s; 
             @delay: 0s; 
             @timing: ease; 
             @compact: true;
             @raw-input: false) {
  .output() when (@raw-input = false) and not (@compact = true) {
  -webkit-transition-property:@props; 
     -moz-transition-property:@props;
      -ms-transition-property:@props;
       -o-transition-property:@props; 
          transition-property:@props;
  -webkit-transition-duration:@duration; 
     -moz-transition-duration:@duration;
      -ms-transition-duration:@duration;
       -o-transition-duration:@duration; 
          transition-duration:@duration;
  -webkit-transition-delay:   @delay; 
     -moz-transition-delay:   @delay;
      -ms-transition-delay:   @delay;
       -o-transition-delay:   @delay; 
          transition-delay:   @delay;
  -webkit-transition-timing-function:@timing; 
     -moz-transition-timing-function:@timing;
      -ms-transition-timing-function:@timing;
       -o-transition-timing-function:@timing; 
          transition-timing-function:@timing;
  }
  .output() when (@raw-input = false) and (@compact = true) {
    @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();
}
Run Code Online (Sandbox Code Playgroud)

少用例子

.test {
  .transition();
}
.test-props {
  .transition(width);
}
.test-duration {
  .transition(@duration: 3s);
}
.test-delay {
  .transition(@delay: 10s);
}
.test-timing {
  .transition(@timing: linear);
}
.test-all {
  .transition(height, 4s, 12s, ease-out);
}
.test-multitransitions {
  .transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease);
}
.test-not-compact {
  .transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease; false);
}
.test-raw-input {
  .transition(@raw-input: top 1s, bottom 1s, color 3s 1s linear;);
}
Run Code Online (Sandbox Code Playgroud)

在上面的示例中,请特别注意两件事:(1)如何使用逗号分隔列表来传递多个值,而使用分号来分隔参数组.所以要想象,它是这样的:

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

(2)raw-input示例如何需要一个结尾分号,让它将逗号视为列表项:

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

示例的CSS输出

.test {
  -webkit-transition:  all 1s 0s ease;
  -moz-transition:  all 1s 0s ease;
  -ms-transition:  all 1s 0s ease;
  -o-transition:  all 1s 0s ease;
  transition:  all 1s 0s ease;
}
.test-props {
  -webkit-transition:  width 1s 0s ease;
  -moz-transition:  width 1s 0s ease;
  -ms-transition:  width 1s 0s ease;
  -o-transition:  width 1s 0s ease;
  transition:  width 1s 0s ease;
}
.test-duration {
  -webkit-transition:  all 3s 0s ease;
  -moz-transition:  all 3s 0s ease;
  -ms-transition:  all 3s 0s ease;
  -o-transition:  all 3s 0s ease;
  transition:  all 3s 0s ease;
}
.test-delay {
  -webkit-transition:  all 1s 10s ease;
  -moz-transition:  all 1s 10s ease;
  -ms-transition:  all 1s 10s ease;
  -o-transition:  all 1s 10s ease;
  transition:  all 1s 10s ease;
}
.test-timing {
  -webkit-transition:  all 1s 0s linear;
  -moz-transition:  all 1s 0s linear;
  -ms-transition:  all 1s 0s linear;
  -o-transition:  all 1s 0s linear;
  transition:  all 1s 0s linear;
}
.test-all {
  -webkit-transition:  height 4s 12s ease-out;
  -moz-transition:  height 4s 12s ease-out;
  -ms-transition:  height 4s 12s ease-out;
  -o-transition:  height 4s 12s ease-out;
  transition:  height 4s 12s ease-out;
}
.test-multitransitions {
  -webkit-transition:  width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
  -moz-transition:  width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
  -ms-transition:  width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
  -o-transition:  width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
  transition:  width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
}
.test-not-compact {
  -webkit-transition-property: width, height, top;
  -moz-transition-property: width, height, top;
  -ms-transition-property: width, height, top;
  -o-transition-property: width, height, top;
  transition-property: width, height, top;
  -webkit-transition-duration: 1s, 2s;
  -moz-transition-duration: 1s, 2s;
  -ms-transition-duration: 1s, 2s;
  -o-transition-duration: 1s, 2s;
  transition-duration: 1s, 2s;
  -webkit-transition-delay: 0s, 1s, 3s;
  -moz-transition-delay: 0s, 1s, 3s;
  -ms-transition-delay: 0s, 1s, 3s;
  -o-transition-delay: 0s, 1s, 3s;
  transition-delay: 0s, 1s, 3s;
  -webkit-transition-timing-function: ease-in, ease-out, ease;
  -moz-transition-timing-function: ease-in, ease-out, ease;
  -ms-transition-timing-function: ease-in, ease-out, ease;
  -o-transition-timing-function: ease-in, ease-out, ease;
  transition-timing-function: ease-in, ease-out, ease;
}    
.test-raw-input {
  -webkit-transition: top 1s, bottom 1s, color 3s 1s linear;
  -moz-transition: top 1s, bottom 1s, color 3s 1s linear;
  -ms-transition: top 1s, bottom 1s, color 3s 1s linear;
  -o-transition: top 1s, bottom 1s, color 3s 1s linear;
  transition: top 1s, bottom 1s, color 3s 1s linear;
}
Run Code Online (Sandbox Code Playgroud)

如果从不需要长格式,那么mixin代码可以减少到:

.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();
}
Run Code Online (Sandbox Code Playgroud)

Luk*_*age 5

从less.js 1.3开始,您必须在参数列表中指定...以表示可以添加更多参数.例如

.transition-property(...) {
 foo: @arguments;
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

12240 次

最近记录：

8 年，1 月 前
相关归档
如何在AngularJS中包含视图/部分特定样式 131
让孩子在溢出之外可见:隐藏的父母 83
将图像对齐到同一行的文本左侧 - Twitter Bootstrap3 47
如何使用罗盘生成ember-cli中的图像精灵？ 30
将表单与Bootstrap 4中的中心对齐 30
如何为YouTube视频添加启动画面/占位符图像 24
块和内联块的宽度有什么区别:100%？ 23
为什么没有margin-top:auto和margin-bottom:auto和left左右对应的一样？ 19
如何在Bootstrap 3中将Textarea设置为100%高度？ 19
less.js 中“&gt;”和“&amp;”是什么意思？ -1
难疑归档
在JavaScript中深度克隆对象的最有效方法是什么？ 5181
如何在JavaScript中验证电子邮件地址？ 4099
使用'for'循环迭代字典 2901
如何将列表拆分为大小均匀的块？ 2068
你如何断言在JUnit 4测试中抛出某个异常？ 1915
如何从Java中的字符串值获取枚举值？ 1890
如何以MS Word保留格式和语法高亮显示代码片段？ 1877
PostgreSQL"DESCRIBE TABLE" 1790
最优雅的方法来检查Python中的字符串是否为空？ 1282
有条件地申请课程的最佳方式是什么？ 1172