为什么这个 LESS mixin 不起作用？

【问题标题】：Why isn't this LESS mixin working?为什么这个 LESS mixin 不起作用？
【发布时间】：2013-08-16 11:30:03
【问题描述】：

.v-centered (@height,@width) {
    width: @width;
    height: @height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: (@height / 2)px 0 0 (@width / 2)px;
}

我正在尝试为垂直居中的东西（非行高方式）制作一个 LESS 混合 - 而这个 LESS 混合不起作用。我感觉这与我的margin: (@height / 2)px 0 0 (@width / 2)px; 行有关，但我看不出我的语法哪里出错了。任何帮助表示赞赏。

【问题讨论】：

标签： syntax less mixins

【解决方案1】：

这取决于您如何使用它。现在，您的代码假定传入的宽度和高度没有单位，但您的 width 和 height 属性也不会像 margin 属性那样附加单位。

此外，要正确居中，您需要否定边距。

.v-centered (@height, @width) {
    width: @width;
    height: @height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -(@height / 2) 0 0 -(@width / 2);
}

DEMO

【讨论】：

那么用你的方法，这行得通吗？ .v-centered(200px,500px);