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

Question

.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;台词有关，但我看不出我的语法哪里出错了。任何帮助表示赞赏。

Answer 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