CSS选择器中的Mixin变量更少 [英] Less Mixin Variable within CSS selector

问题描述

是否可以在CSS选择器名称中合并一个较少mixin变量的值?

Is is possible to concatonate the value of a less mixin variable within a css selector name?

即:

.leftImage{
    .alignContent(left);
}

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

因此，我想做的就是将@side的值(在本例中)与部分css选择器"margin-"混合，最终尝试创建"margin-'left"(不带引号)

So what im trying to do is mixin the value of @side (in this instance) with a partial css selector of 'margin-' ultimately trying to create 'margin-'left'' (without the quotes)

推荐答案

在LESS 1.6.x及更高版本中，它是简单:

In LESS 1.6.x and higher it is as simple as:

.leftImage {
    .alignContent(left);
}

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

但是早期版本也可以实现，只是需要一些温和的技巧:在LESS中使用属性名称中的变量(动态属性/属性名称插值) )等.

But same is possible with earlier versions too, just needs some gentle hacks: Using variables in property names in LESS (dynamic properties / property name interpolation) etc.

这篇关于CSS选择器中的Mixin变量更少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！