Меньше Mixin Variable в селекторе CSS

Можно ли объединить значение переменной less mixin в имени селектора css?

ie:

.leftImage{
    .alignContent(left);
}

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

Итак, что я пытаюсь сделать, это смешать значение @side (в данном случае) с частичным селектором css 'margin-', в конечном итоге пытаясь создать 'margin-'left'' (без кавычек)


less
person user2870826    schedule 16.01.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В LESS 1.6.x и выше это просто:

.leftImage {
    .alignContent(left);
}

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

Но то же самое возможно и с более ранними версиями, просто нужно несколько нежных хаков: Использование переменных в именах свойств в LESS (динамические свойства/интерполяция имен свойств)и т.д.

person seven-phases-max    schedule 16.01.2014