没有mixin参数语法错误

Question

我有以下mixin调整项目的宽度和填充，以应对IE7缺乏对box-sizing的支持：border-box。它给了我一个关于＆amp;的语法.width（@width：100，@ paddinglr：0）

我很欣赏这是缺少一个％，但任何想法为什么它会破裂？

.width(@width: 100, @paddinglr: 0) {
  width: @width;
  padding: @paddinglr;
}

body {
&.lt-ie8 {
    & .width(@width: 100, @paddinglr: 0) {
        width: @width-@paddinglr;
        padding: @paddinglr;
    }
  }
}

Answer 1

您无法将mixin定义为选择器字符串，因此嵌套部分的& .width()不能是mixin定义（这是您尝试制作的）。

我认为你要做的是制作一个通用的.width() mixin用于任何特定的元素。您似乎只想为padding设置一个数字，这很好。

然而 ，它似乎（基于您的%评论），您希望此代码生成width值是父级的100%减去padding的值。假设您对padding也使用百分比，这也没关系。如果你不是，但打算将padding作为一个像素值，混合单位不能像你想象的那样由LESS 完成，因为LESS是一个预处理器，因此它不是动态的，能够根据运行时的百分比检测父项的width，然后减去padding像素值。

现在，如果您的意图是百分比，或 width和padding的任何相同的衡量值（两者都是px，{{1}单位等），然后你可以通过各种方式得到你想要的东西。其中一个解决方案是覆盖em嵌套中的.width() mixin，例如：

.lt-ie8

哪个产生这个CSS（减去上面的评论只是为了与你沟通）：

.width(@width: 100%, @paddinglr: 0) {
  width: @width;
  padding: @paddinglr;
}

body {

.someDiv {
   .width(100%, 10%);
}

&.lt-ie8 {
    /* here is the override of the mixin */
    .width(@width: 100%, @paddinglr: 0) {
    /* note, I believe you will want to multiply the padding by 2 for the width change due to left and right padding */
        width: @width - (2 * @paddinglr);
        padding: @paddinglr;
    }
    /* and here is the override of the actual css */
    .someDiv {
        .width(100%, 10%);
    }
  }
}