Меньше - Как вставить @variable в свойство (в отличие от значения)

Question

В less.js я могу без проблем заменить значения переменными.

@gutter: 20px;
margin-left:e(%("-%d"), @gutter);

При попытке заменить свойства переменными я получаю ошибки.Как бы я выполнил следующее в Less?

@gutter: 20px;
@direction: left;
e(%("margin-%d"), @direction):e(%("-%d"), @gutter);

Answer 1

Спасибо Alvivi за решение и исследования (за это вы получаете награду).Я решил добавить следующее в качестве фактического ответа, так как это реальный способ его настройки вместо того, чтобы смотреть на псевдокод .blah ().

Вот реальная стратегия его настройки:

@gutter: 20px;
@dir: left;
@dirOp: right;

затем создайте миксины для увеличения поля и отступов следующим образом:

.margin(left, @dist:@gutter) {
    margin-left:@dist;
}
.margin(right, @dist:@gutter) {
    margin-right:@dist;
}
.padding(left, @dist:@gutter) {
    padding-left:@dist;
}
.padding(right, @dist:@gutter) {
    padding-right:@dist;
}
.lr(left, @dist: 0) {
    left: @dist;
}
.lr(right, @dist: 0) {
    right: @dist;
}

.. тогда вы можете просто

#selector {
    .margin(@dir);
} 

или

#selector {
    .margin(@dirOp, 10px);
}

все вместе:

#selector {
    .margin(@dir);
    .margin(@dirOp, 50px);
    .padding(@dir, 10px);
    .padding(@dirOp);
    float:@dir;
    text-align:@dirOp;
    position:absolute;
    .lr(@dir);
}

Легкий свежий LTR / RTL с LESS!Woot!

Answer 2

Экранирование, как говорится в документации , используется для создания значений CSS (не свойств).

Здесь обсуждается несколько способов здесь .Можно было бы использовать параметрические миксины .Например:

.g ()       { /* Common properties */ }
.g (right)  { margin-right: e(...) } 
.g (left)   { margin-left: e(...) }