CSS选择器中的Less Mixin变量

Question

是否可以在css选择器名称中连接less mixin变量的值？

即：

.leftImage{
    .alignContent(left);
}

.alignContent(@side: left; @marAmount: 20px;){
    img{
        float: @side
        margin-@side: @marAmount;
    } 
}

所以我试图做的是将@side（在这个例子中）的值与'margin-'的部分css选择器混合，最终尝试创建'margin-'left''（不带引号）

Answer 1

在LESS 1.6.x及更高版本中，它是as simple as：

.leftImage {
    .alignContent(left);
}

.alignContent(@side: left, @marAmount: 20px) {
    img {
        float: @side;
        margin-@{side}: @marAmount;
    } 
}

但是早期版本也是如此，只需要一些温和的黑客：Using variables in property names in LESS (dynamic properties / property name interpolation)等。