使用 LESS mixin 居中

Question

这是来自 LESS 新手的。

我正在尝试使用 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。

LESS mixin syntax.

我想这就是你想要的：

.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 样式的行为类似于混合，但也针对 class。如果您希望它不针对 class 并且仅作为混合使用，那么您可以使用括号使其看起来像一个函数：

.centerH() {

这将允许其他选择器将 .centerH 用作混合，但不会将 .centerH 本身输出到生成的 CSS 文件中。

使用 LESS mixin 居中

centering using LESS mixin

css

mixins

less