mixins с несколькими параметрами - как выбираются свойства?

Question

Я читаю руководство по LESS, и здесь есть следующий пример:

It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. .mixin(green);, then properties of all mixins with exactly one mandatory parameter will be used:

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

compiles into:

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

Я не могу понять логику выбора свойств. Может кто-нибудь, пожалуйста, объясните мне это?

Answer 1

Цитирование LESS Manual:

Допустимо определять несколько миксинов с одинаковыми именами и количеством параметров. Меньше будут использовать свойства всего, что можно применить. Если вы использовали миксин с одним параметром, например.mixin(зеленый); тогда будут использоваться свойства всех миксинов с ровно одним обязательным параметром

Ключевые операторы Less будут использовать свойства всего, что может применяться, и тогда будут использоваться свойства всех миксинов с ровно одним обязательным параметром.

В приведенном ниже примере выходные данные содержат оба свойства, указанные в .mixin с одним параметром, а также .mixin с двумя параметрами, потому что .mixin с двумя параметрами имеет значение по умолчанию для второго (и, следовательно, нуждается только в одном обязательном параметре).

.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}

Таким образом, по существу, когда второй параметр не указан в mixin оператор вызова, правило / свойства все еще могут быть применены, потому что будет использоваться значение по умолчанию. Если вы удалите значение по умолчанию для отступа и сделаете его, как показано ниже, оно не будет применено, когда mixin Вызов имеет только один параметр.

.mixin(@color; @padding) {
  color-2: @color;
  padding-2: @padding;
}

Точно так же .mixin с тремя параметрами не применяется, потому что mixin Вызов имеет только один параметр, и по умолчанию указано значение только для одного другого параметра. По сути, у нас есть только два параметра со значениями.

.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

Answer 2

Дополнение к хорошему ответу @Harry выше, точно так же, но другими словами (я просто думал, что эта "компактная" форма лучше всего подойдет для "технического" парня, такого как я, например):

• .mixin(@color) {...} только совпадения .mixin вызовы с 1 аргументом пройдены.
• .mixin(@color; @padding: 2) {...} Матчи .mixin звонки с 1 или 2 аргументами.
• .mixin(@color; @padding; @margin: 2) {...} Матчи .mixin звонки с 2 или 3 аргументами.

.mixin(#008000); call в примере имеет 1 аргумент, поэтому вызываются только первое и второе определения mixin (но не третий).