创建动态更少的mixin设置属性名称

我想创建一个较少的mixin来构建多个边距/填充规则。我已经能够为高度，宽度，高度百分比和宽度百分比创建正确的混合。例如，创建动态更少的mixin设置属性名称

.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) { (~"[email protected]{px}") { width: ~"@{px}px"; } }

这使我可以创建显式宽度或一系列宽度类。

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

我想：下面将在5

.widthX (1215);

增量它正确地创建CSS创建增量为1宽度1-30 CSS类，然后从30-1215能够创造margin和padding加让我每边添加作为一个参数一个类似的混入，

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

.margin (@px,@side,@abbr) { (~"[email protected]{abbr}@{px}") { ~"width-${side}": ~"@{px}px"; } }

，并称呼其为：

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

创建1-100px的margin-top类。然而，我不断收到语法错误

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

我已经尝试了许多变化，他们都保持失败。我可以，但真的不想为每个方向创建多个混合。我希望有人能够提供一些可以解决我的问题的建议。

我发现这个类似的帖子：dynamic css properties in less

来源

2012-08-13 Phil Bolduc

LESS目前不支持动态CSS属性。这种缺乏对动态属性的支持是some argue is an advantage of SASS over LESS的一点批评。对某些库（例如，less.js）确实存在拉取请求，这会增加此功能。

否则，你几乎坚持做你不想做什么，即：

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

来源

2012-08-17 20:53:55 merv

只是为了信息......我最近像这样的东西试图回答另一个类似的问题打。 ..并想出了一对夫妇的解决方法http://stackoverflow.com/questions/14868042/using-an-argument-for-tag-name-in-less/15443008#15443008 – 2013-03-18 15:34:52

正如马丁在他的更新答案中指出的，该功能已在1.6以下实施 – tacone 2014-06-28 14:04:57

创建动态更少的mixin设置属性名称

回答

相关问题