创建较少动态混合的设置属性名称 [英] Create dynamic less mixin setting property names

问题描述

我想创建一个较少的mixin来建立许多边距/填充规则.我已经能够为高度，宽度，高度百分比和宽度百分比创建正确的mixin.例如，

I want to create a less mixin to build up a number of margin/padding rules. I have been able to create the correct mixin for height, width, height percent and width percents. For example,

.widthX (@px) when (@px > 0) and (@px =< 30) {
    .width(@px);
    .widthX(@px - 1);
}

.widthX (@px) when (@px >= (30 + 5)) {
    .width(@px);
    .widthX(@px - 5);
}

.width (@px) { (~".w@{px}") { width: ~"@{px}px"; } }

这使我可以创建显式宽度或一系列宽度类.下面将创建宽度为1至30的CSS类，以1为增量，然后从30-1215创建为5的CSS类.

This allows me to create explict widths or a series of width classes. The following will create CSS classes for widths 1-30 in increments of 1 and then from 30-1215 in increments of 5.

.widthX (1215);

在CSS中会正确创建:

in the CSS it properly creates:

.w1 { width: 1px; }
.w2 { width: 2px; }
// 3-29 ommitted
.w30 { width: 30px; }
.w35 { width: 35px; }
.w40 { width: 40px; }
.w45 { width: 45px; }
// etc

我希望能够为边距和填充创建类似的mixin，并允许将每一面都添加为参数，

I want to be able to create a similiar mixin for margin and padding plus allowing me to add each side as a parameter,

.marginX (@px,@side,@abbr) when (@px > 0) {
    .margin(@px,@side,@abbr);
    .marginX(@px - 1,@side,@abbr);
}

.margin (@px,@side,@abbr) { (~".w@{abbr}@{px}") { ~"width-${side}": ~"@{px}px"; } }

并将其称为:

.marginX(100,"top","t");

创建1-100px的边距最高的类.但是，我不断收到语法错误

to create margin-top classes for 1-100px. However, I keep getting syntax error on

{ ~"width-${side}": ~"@{px}px"; } }

我尝试了许多变体，但它们都一直失败.我可以但真的不想为每个方向创建多个mixin.我希望有人能够提供解决我问题的建议.

I have tried numerous variations and they all keep failing. I could, but really do not want to, create multiple mixins for each direction. I am hoping someone might be able to provide some suggestions that will solve my problem.

我发现了类似的帖子:动态CSS属性的使用量更少

I have found this similar post: dynamic css properties in less

推荐答案

LESS当前不支持动态CSS属性.缺乏对动态属性的支持是一种批评观点，它 less.js )中确实存在拉取请求，这种能力.

LESS does not currently support dynamic CSS properties. This lack of support for dynamic properties is one point of criticism which some argue is an advantage of SASS over LESS. There do exist pull requests on certain libraries (eg, less.js) which add this capability.

否则，您几乎会陷入不想做的事情，即:

Otherwise, you are pretty much stuck doing what you didn't want to do, namely:

.margin (@px,@side,@abbr) when (@side = left) {
  (~".m@{abbr}@{px}") { margin-left: ~"@{px}px"; }
}
.margin (@px,@side,@abbr) when (@side = right) { 
  (~".m@{abbr}@{px}") { margin-right: ~"@{px}px"; }
}

这篇关于创建较少动态混合的设置属性名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！