Question

我有以下LESS：

&.settings-prompt .panel {
    margin-left: -190px;
    width: 380px;
    height: 200px;
}

&.create-playlist-prompt .panel {
    margin-left: -165px;
    width: 330px;
    height: 180px;
}

基本上，我总是希望.panel的边距为宽度的-50％。可以用LESS表达吗？

Answer 1

使用纯粹的Less，你可以为面板创建一个paramterized mixin，然后根据输入参数使用它生成margin-left，如下所示。这并不需要使用单独的变量，而只是使用mixin而不是每次都分配宽度。它还减少了Less。

中的代码行

<强>减：

&.settings-prompt .panel {
    .panel(330px);
    height: 200px;
}

&.create-playlist-prompt .panel {
    .panel(130px);
    height: 180px;
}

.panel(@width){ /* Updated based on comment by seven-phases-max */
    margin-left: (@width / -2); /* calculate -50% of width and use as margin-left */
    width: @width; /* assign the input param as width */
}

已编译的输出：

.settings-prompt .panel {
  margin-left: -165px;
  width: 330px;
  height: 200px;
}
.create-playlist-prompt .panel {
  margin-left: -65px;
  width: 130px;
  height: 180px;
}

Less Demo

使用jQuery：（以防万一未来读者正在寻找此选项）

$("div").each(function() { // call function to auto assign margin for every div
    var el = $(this);
    el.css({
        'margin-left': -(el.width()/2) //set margin-left as - 50% (-width/2);
    });
});

jQuery Demo

使用LESS动态读取宽度？

1 个答案: