0

我有以下 mixin 可以调整项目的宽度和填充，以应对 IE7 缺乏对 box-sizing:border-box 的支持。它给了我一个关于 & .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;
    }
  }
}
4

1 回答 1

3

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

我认为您要做的是制作一个通用的.width()mixin 以在任何特定元素上使用。看来您打算只为 设置一个数字padding，这很好。

但是，似乎（根据您的%评论），您希望此代码产生一个width值，该值是100%父级减去padding. 这也没关系，假设您也使用百分比。padding如果您不是，而是打算将其padding设为像素值，则 LESS 无法像您预期的那样完成混合单元，因为 LESS 是一个预处理器，因此从能够检测width到父级基于运行时的百分比，然后减去padding像素值。

现在，如果您的意图是百分比，或者两者 的任何相等的测量值width和padding（无论是两者px，两个em单位等），那么您可以通过各种方式得到您想要的。许多解决方案之一是覆盖嵌套中的.width()mixin .lt-ie8，例如：

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

这会产生这个 CSS（减去上面只是为了与您交流的评论）：

body .someDiv {
  width: 100%;
  padding: 10%;
}
body.lt-ie8 .someDiv {
  width: 80%;
  padding: 10%;
}
于 2012-12-20T15:28:45.847 回答