Question

这是来自一个新手。

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

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

我认为这就是你想要的：

False

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

.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; }样式的行为类似于mixin，但也是一个类。如果你希望它不能对一个类起作用而只能用作mixin，那么你可以使用括号使它看起来像一个函数：

.parent

允许其他选择器使用.centerH() {作为mixin，但不会将.centerH本身输出到生成的CSS文件中。

使用LESS mixin进行居中

1 个答案: