less.css - динамически установить параметр css

Question

Я научился использовать less.css для создания динамических CSS-файлов. Я хотел бы создать динамическое свойство в моем CSS-файле и загрузить его, например:

@marginProperty : margin-left;
.top
{
   @marginProperty: 10px;
}

Возможно ли это? Кажется, не компилируется для меня. Есть идеи?

Answer 1

Это не совсем так;Вы не можете установить свойство из переменной, переменные являются только значениями этих свойств.Вместо того, чтобы устанавливать переменную для свойства, вы должны использовать миксин.Это сложно, не зная точно, как вы структурируете свой LESS / CSS или каковы ваши цели, но кажется, что вам нужно думать наоборот.CSS, как и SQL, является декларативным, поэтому вы должны описать результат из кода, а не описывать процесс получения этого результата.Что-то вроде этого может сделать это:

.margin(@size:10px) {
    margin-left: @size;
}

.top {
    .margin(10px);
}

Чтобы .margin mixin можно было определить в одном файле mixin, вы можете @import его, и когда вам нужно переопределить его, замените этот файл mixin другимпохожий.