使用LESS mixin进行居中

Question

这是一个新手.

我正在尝试使用LESS mixin水平居中,但它不起作用.这是我的语法吗？其他LESS设置正在运行.

减:

@mixin centerH {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
#homepage_boxes {
    width: 25%;
    @include centerH;
    top: 0;
}
.parent {
  position: relative;
}
#screen1 {
    .parent;
}

HTML:

<div class="screen" id="screen1">
    <div id="homepage_boxes" class="section group">
        <div class="col span_1_of_3 clickable">
            <div class="part_head part1">Part 1</div>
        </div>
        <div class="col span_1_of_3 clickable">
            <div class="part_head part2">Part 2</div>
        </div>
        <div class="col span_1_of_3 clickable part_selected">
            <div class="part_head part3">Part 3</div>
        </div>
    </div>

Answer 1

您使用的是SASS语法,而不是LESS.

没有mixin语法.

我想这就是你想要的:

.centerH {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
#homepage_boxes {
    width: 25%;
    .centerH;
    top: 0;
}

您实际上在示例代码中使用了正确的语法:

.parent {
  position: relative;
}
#screen1 {
    .parent;
}

该.parent造型就像一个混入,但还针对一类.如果你希望它不能对一个类起作用而只能作为一个混合使用,那么你可以使用括号使它看起来像一个函数:

.centerH() {

这将允许其他选择器.centerH用作mixin,但不会将.centerH自身输出到生成的CSS文件中.