css - 带有参数语法错误的 LESS 混合

Question

我有以下 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;
    }
  }
}

Answer 1

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

我认为您正在尝试做的是制作一个通用的 .width() mixin 以用于任何特定元素。看来您打算只为 padding 设置一个数字，这没问题。

但是，似乎(根据您的 % 评论)，您希望这段代码产生一个 width 值是父级的 100% 减去 padding 的值。这也没有关系，假设您也对 padding 使用了百分比。如果您不是，而是打算让 padding 成为像素值，混合单元不能像您预期的那样由 LESS 完成，因为 LESS 是 预处理器，因此它不是动态的，因为它能够在运行时根据百分比检测父级的 width，然后减去 padding像素值。

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

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