标签: less-mixins

LESS允许参数化混合,例如:

.transition(@property, @duration){
    transition:         @property @duration;
    -moz-transition:    @property @duration; /* Firefox 4 */
    -webkit-transition: @property @duration; /* Safari and Chrome */
    -o-transition:      @property @duration; /* Opera */
}

但是,这并不总是适用于过渡等属性.如果您尝试多次转换并尝试多次调用mixin,则最后一次mixin将覆盖所有先前定义的转换.那是因为用于定义多个转换的正确CSS3语法是:

... {
    transition: @property1 @duration1, @property2 @duration2, ...;
}

我可以想到将多个转换定义为mixin的唯一方法是重载mixin:

.transition(@property, @duration){...}
.transition(@property, @duration, @prop2, @dur2){...}
.transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}

是否有更健壮和简洁的方法来定义转换mixin以获取可变数量的参数并构造适当的转换CSS？

上下文:有时我想转换多个属性; 例如,a :hover可能触发背景颜色,框阴影,文本颜色等的转换...

我正在尝试编写一个mixin,但我似乎无法按照我想要的方式获取参数:多个属性被视为一个单独的参数.

现行守则

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
    -moz-transition: @property @time @timing;
    -webkit-transition: @property @time @timing;
    -o-transition: @property @time @timing;
    transition: @property @time @timing;
}

a {
    .transition(color, opacity, .5s);
}

期望的输出

a {
    -moz-transition: color, opacity .5s ease-in-out;
    -webkit-transition: color, opacity .5s ease-in-out;
    -o-transition: color, opacity .5s ease-in-out;
    transition: color, opacity .5s ease-in-out; 
}

实际产出

a {
    -moz-transition: color opacity .5s;
    -webkit-transition: color opacity .5s;
    -o-transition: color opacity .5s;
    transition: color opacity .5s;  
}

有任何想法吗？

我正在向一个大型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;
}

(注:我省略了-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);
}

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

尝试2:将@arguments与命名参数一起使用

.transition-property(@p1, @p2, @p3, @p4, @p5) {
    -webkit-transition-property: @arguments; …

我,

希望你能提供帮助.

有没有办法让LESS只返回一个值 - 感觉我错过了一些非常明显的东西

说我有:

@unit:em;
@basevalue:1;

我可以用某些东西给我一个简写回报 -

.someClass {  padding: ~'@{basevalue}@{unit}'; }

喜欢说:

.returnUnit() { ~'@{basevalue}@{unit}'; }

.someClass {  padding: returnUnit(); }

因为我最终希望的是:

.returnUnit(@val) { @basevalue*@val@{unit}; }
.someClass {  padding:returnUnit(0.5); }

使用混合我必须定义样式属性,但是此返回函数的值将用于许多不同的css属性.

希望我有道理,我只是缺乏更深刻的rtfm.

非常感谢,如果可以的话.

更新为@Chococrocs 指向文档的指针,谢谢.

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

• 看起来像我需要的？- 只是看看我是否总能在单位变量上标记它....

  ---

更新:这是部分方式......

.unitRelative(@val) {
  @value : @basevalue*@val;
  @relative: …

我有一个名为Less变量的变量@side.我想要的是@sideOpposite根据变量的值设置@side变量.它只需要两个值:"left"或"right".

换句话说,我需要一个相当于JS代码的Less:

var side = "left",
    sideOpposite = (side === "left")? "right" : "left";

我试图使用when函数完成此操作,但据我所知,它不能以这种方式工作,只适用于CSS属性,而不适用于变量:

when (@side = right){
  @sideOpposite: left;
}
when (@side = left){
  @sideOpposite: right;
}

如何减少这个代码(可能有一个循环？),有一个"功能",它需要方向和数字？

• @dir =想要的"方向"
• @number =我需要多少次阴影(这里是10次)
• @color =阴影的颜色

示例(工作,但不是很容易使用):

.perspective-box(@dir, @number, @color) when (@dir = se){
   -webkit-box-shadow:1px 1px 0 0 @color,
                      2px 2px 0 0 @color,
                      3px 3px 0 0 @color,
                      4px 4px 0 0 @color,
                      5px 5px 0 0 @color,
                      6px 6px 0 0 @color,
                      7px 7px 0 0 @color,
                      8px 8px 0 0 @color,
                      9px 9px 0 0 @color,
                      10px 10px 0 0 @color;
}

我有一个@dir改变阴影方向的参数.在这个例子中,我把@dir = se,在哪里se=东南.对于西北,东北,西南和东南来说,情况也是如此.

怎么避免这个...？

.perspective-box(@dir, @number, @color) …

合乎逻辑的方式是:

.mymixin() {
  sample_key: samplevalue;
}

@avar:  mymixin;
.@{avar}();

但我得到一个解析错误.

有办法吗？

我正在使用Visual Studio/Web Essentials创建一组LESS mixins.

是否可以为LESS mixins编写XML类型的文档？或者可能有枚举来限制输入的参数？

例如,使用这个mixin:

.background-clip(@value)
{
    -webkit-background-clip: @value;
       -moz-background-clip: @value;
            background-clip: @value;
}

有一些描述三个可能值的文档会很好,就像为background-clip创建一个普通的CSS选择器一样 -

它能够创建这样一个生成CSS组的mixin吗？我将在下面解释我的意思:

.fancymixin(@max, @prefix) {
     //content what I don't know how to code
}

.fancymixin(10, x);

它会产生类似于:

.x10, .x9, .x8, .x7, .x6, .x5, .x4, .x3, .x2, .x1 {
     //some fancy style I want to set
}

问题

有什么方法可以（以编程方式）在 LESS 编译器中抛出错误吗？

为什么？

我今天一直在摆弄 mixin 防护，因为我想根据元素大小和元素计数生成 CSS 边距。我认为当元素不适合包装器时，直接在编译时抛出错误会很酷。

信息：我正在使用lessc编译器将 LESS 代码编译为 CSS。我没有使用任何 Javascript 库在执行时编译它。

更少的来源

// Variables
@wrapper-small:  830px;
@wrapper-big:   1200px;

.col-fixed(@size, @count, @wrapper)  when ((@size*@count) <= @wrapper)
{
    width: unit(@size, px);
    margin-right: unit( (@wrapper - @count * @size) / (@count - 1), px);    
}

.test_col_fixed {
    // will fail the mixin guard and output no generated CSS        
    .col-fixed(340, 3, @wrapper-small);

    // would work if not in comment
    // .col-fixed(340, 3, @wrapper-big);
}

生成的 CSS（小包装） …